<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 我这样理解对不对
添加回答
举报
0/150
提交
取消