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

直接上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>


 图片可以在服务器端动态输出，div的id最好是相同字母+自增数字。图片不限制张数，每组的图片张数也可以不相同。

 样式控制每组图片的容器大小
    div{width:400px; height:400px; overflow:hidden}

posted on 2011-10-09 18:37  BarneyZhang  阅读(2097)  评论(0)  编辑  收藏  举报

导航