轮播图的具体思路很简单:把第一张图也当成最后一张图,然后在呈现最后一张图片的时候,立刻将ul的left样式设置为0,以此实现无缝跳转的感觉
自己在练习时,定义了move实现动画效果,设置的left总是失效
每次执行完move,然后执行回调函数,回调函数中调用了setA,用来控制下面的小点同步改变
但是发现除了left之外,其他的属性都可以再调用setA时,立刻改变,但是ulElt.style.left失效
function movepic(){
timer=setInterval(function(){
index++;
index=index%len
move(ulElt,10,-480*index,"left",function(){
setA()
},index)},4000)
}
function setA(){
if(index>=(len-1)){
index=0;
ulElt.style["left"]=0;
}
for(var i=0;i<spanArr.length;i++){
spanArr[i].style.backgroundColor=""
}
spanArr[index].style.backgroundColor="#fff"
}
}
后来发现move.js中存在这个问题 调用move之后,如果obj.style[attr]=newvalue+"px"写在了if后面的话,相当于是先执行了回调,将left改为0,立刻在覆盖newvalue的值,所以造成left无法更改的幻觉。太愚蠢了~~
if(newvalue==target){
clearInterval(obj.timer)
callback&&callback()
}
},30)
obj.style[attr]=newvalue+"px"