【原创】jquery实现动态多组图片切换

最新推荐文章于 2023-02-09 09:50:47 发布

weixin_30576827

最新推荐文章于 2023-02-09 09:50:47 发布

阅读量190

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhxhdean/archive/2011/10/09/2204055.html

版权

直接上jquery代码：

<body>
    <div id="pics0">
        <img src="upload_files/Img320833552.jpg" />
        <img src="upload_files/Img320833554.jpg" />
        <img src="upload_files/Img320833556.jpg" />
    </div>

    <div id="pics1">
        <img src="upload_files/Img320833552.jpg" />
        <img src="upload_files/Img320833554.jpg" />
    </div>
    <script>

var imglength = [];
var pic = [];
var viewindex = [];
for (var i = 0; i < $('[id^=pics]').length; i++) {
            pic[i] = 'pics' + i;
            viewindex[i] = 0;
        }

        $(function () {

for (var i = 0; i < pic.length; i++) {
                imglength[i] = $('#' + pic[i] + '>img').length;

for (var j = 1; j < imglength[i]; j++) {
                    $('#' + pic[i] + '>img').eq(j).css('display', 'none');
                }
            }  
            setInterval('changeimg()', 5000);
        })
function changeimg() {
for (var j = 0; j < pic.length; j++) {
var tmp = pic[j].replace('pics', '');
var imgsize = $('#' + pic[j] + '>img').length;
                viewindex[tmp]++;
if (viewindex[tmp] >= imgsize) {
                    viewindex[tmp] = 0;
                }
                if (imgsize <= 1) {//如果图片小于2张，图片不切换
                    return;
                }
for (var i = 0; i < imgsize; i++) {
                    $('#' + pic[j] + '>img').eq(i).css('display', 'none');
                }
                $('#' + pic[j] + '>img').eq(viewindex[tmp]).fadeIn(500);
            }
        }
    </script>
</body>