zoukankan      html  css  js  c++  java
  • 【原创】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{400px; height:400px; overflow:hidden}

  • 相关阅读:
    域对象
    会话
    http请求
    ServletContext对象的应用
    配置一个servlet程序
    合并两个有序数组
    删除排列数组中的重复项
    移除元素
    搜索插入位置
    九九乘法表
  • 原文地址:https://www.cnblogs.com/zhxhdean/p/2204055.html
Copyright © 2011-2022 走看看