js实现无缝滚动双图切换效果

<div class="wrap"> <ul class="list">  <li>   <img src="img/img0.png">  </li>   <li>   <img src="img/img1.png">  </li> </ul> <a href="javascript:;" class="prev">prev</a> <a href="javascript:;" class="next">next</a></div>

(function(){ var list=document.querySelector(".list"); var imgs=document.querySelectorAll("img"); var prev=document.querySelector(".prev"); var next=document.querySelector(".next"); var imgW=css(imgs[0],"width");//使用封装好的css()获取img的宽度 var now=0; var imgData=["img/img0.png",     "img/img1.png",     "img/img2.png",     "img/img3.png",]; prev.onclick=function(){  //找出接下来要显示的图片的下标  var prev=(now-1+imgData.length)%imgData.length;  //因为是从右往左运动，当前显示的应在右侧，即将显示的在左侧  imgs[0].src=imgData[prev];  imgs[1].src=imgData[now];  //使用封装好的css()设置list的位置  css(list,"left",-imgW);  //使用封装好的运动函数来控制图片移动  startMove(list,{left:0},2000,"easeOut");  now=prev; } next.onclick=function(){  var next=(now+1)%imgData.length;  imgs[0].src=imgData[now];  imgs[1].src=imgData[next];  css(list,"left",0);  startMove(list,{left:-imgW},2000,"easeOut");  now=next; }})();

var isMove=false;//记录定时器开关状态prev.onclick=function(){ if(isMove){  return; } ....上述上一张操作js代码 isMove=true; startMove(list,{left:-imgW},2000,"easeOut",function(){  isMove=false;  });}