两个img实现无缝轮播

来源：互联网发布：java 在类中定义接口编辑：程序博客网时间：2024/06/07 19:40

分两步：  1.两个img无缝切换轮播

         2.把要展示的图片资源循环对应到这两个img


给自己放假的时候，突然想写这个。
<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />    <title>无缝循环滚动</title></head><style type="text/css">    .row{        margin: auto;        width: 260px;        height: 157px;        overflow: hidden;    }    .box{        position: relative;    }    img{        width: 100%;        position: absolute;    }</style><body><div class="row">        <div class="box">            <img id="image1">            <img id="image2">        </div></div></body><script type="text/javascript">    /* x1 第1张图left    * x2 第2张图left    * NS.arr展示图片的地址，及编码    * handImg控制img对应的的图片,因为动态改变是从第三张图开始，前两个不考虑，初始值为2    * */    var NS = {        x1:0,        x2:260,        arr:[["images/1.jpg",1],["images/2.jpg",2],["images/3.jpg",3],["images/4.jpg",4]],        handImg:2,        img1:document.getElementById("image1"),        img2:document.getElementById("image2"),    }        NS.img1.src = NS.arr[0][0];        NS.img2.src = NS.arr[1][0];    window.onload = function(){        var fun = function(){            NS.img1.style.left = NS.x1 + 'px';            NS.img2.style.left = NS.x2 +'px';            NS.x1--;            NS.x2--;            if((NS.x1 + 260) == 0){                NS.x1 = 260;                NS.x2 = 0;                if(NS.handImg == NS.arr.length){                        NS.handImg = 0;                        NS.handImg ++;                    var middle        = NS.arr[NS.handImg-1];                        NS.img1.src   = middle[0];                }else {                        NS.handImg ++;                    var middle        = NS.arr[NS.handImg-1];                        NS.img1.src   = middle[0];                }            }            if((NS.x2 + 260) == 0){                NS.x2 = 260;                NS.x1 = 0;                if(NS.handImg == NS.arr.length){                        NS.handImg = 0;                        NS.handImg++;                    var middle      = NS.arr[NS.handImg-1];                        NS.img2.src = middle[0];                }else {                        NS.handImg++;                    var middle      = NS.arr[NS.handImg-1];                        NS.img2.src = middle[0];                }            }        }        setInterval(fun,10);    }</script></html>

阅读全文

0 0