function animate(offset){ var newLeft =parseInt(list.style.left)+offset; var _time =740;//位移总时间 var interval = 20 // 时间间隔 var speed = offset/(_time/interval);//单位时间位移量 alert(offset); alert(speed); alert("newLeft=" + newLeft); //内部函数 var go = function(){ if( (speed<0&&parseInt(list.style.left)>newLeft)|| (speed>0&&parseInt(list.style.left)<newLeft) ){ list.style.left = parseInt(list.style.left) +speed +"px"; setTimeout(go,interval); }else{ list.style.left=parseInt(list.style.left)+offset+"px"; if(newLeft>-740){ list.style.left = -3700+"px"; } if(newLeft<-3700){ list.style.left = -740+"px"; } } } go(); } next.onclick = function(){ if(index==4){ index = 0; }else{ index +=1; } //alert("test"); showButton(); animate(-740); } prev.onclick = function(){ //按钮复位 if(index==0){ index = 4; }else{ index -= 1; } showButton(); animate(740); }
为什么我点next会跳到第三个,在没写go函数之前都是正常的,写了之后有动画但是会直接跳两张图片
找到问题了,else里面的list.style.left=parseInt(list.style.left)+offset+"px"; 等号后应该用newLeft,用parseInt(list.style.left)相当于又判断了移动后的位置导致最后一次跳了一张图片