<body> <div id="box"> <div id="picture" style="left: -600px;"> <img src="img/5.jpg"/><!--0--> <img src="img/1.jpg"/><!-- -600 --><!--默认--> <img src="img/2.jpg"/><!-- -1200 --> <img src="img/3.jpg"/><!--1800--> <img src="img/4.jpg"/><!--2400--> <img src="img/5.jpg"/><!--3000--> <img src="img/1.jpg"/><!--3600--> </div> <div id="button"> <a href="#" id="left_a"><img src="img/箭头左.png"/></a> <a href="#" id="right_a"><img src="img/箭头右.png"/></a> </div> </div> </body>
window.onload = function(){ var container = document.getElementById('box'); var list = document.getElementById('picture'); var prev = document.getElementById('left_a'); var next = document.getElementById('right_a'); function animate(offset){ var newLeft = parseInt(list.style.left) + offset; /*获取到当前的left的值加上600(-600)赋值给变量*/ // 3600+600 var time = 300 ; /*位移的总时间*/ var interval = 10 ;/*位移的间隔时间*/ var speed = offset/(time/interval); /*偏移量除于时间)*/ function go(){ 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) /*每10毫秒偏移一次*/ }else{ list.style.left = newLeft + 'px' if(newLeft > -600){ list.style.left = -3000 + 'px' } if(newLeft < -3000){ list.style.left = -600 + 'px' } } } go(); } next.onclick = function(){ animate(-600); } prev.onclick = function(){ animate(600); } }
假设 -600 向 -1200 偏移 .判断 parseInt(-600)大于newLeft(-1200)通过setTimeout()不断使-600变小,直到list.style.left 变成-1200 然后执行else 我这样理解对不对
堇延未七
相关分类