<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" charset="utf-8" />
<meta http-equiv="content-type" content="text/html" />
<title>demo</title>
</head>
<style type="text/css">
*{margin:0;padding:0;}
ul,li,img{margin:0;padding:0;border:0;list-style-type:none;}
#list{height:250px;list-style-type:none;overflow:hidden;}
#luanpo{max-width:600px;height:200px;border:1px solid #CCC;margin:0 auto;position:relative;overflow:hidden;}
#imgs li{float:left;height:200px;width:600px;}
#imgs{height:200px;background:#ddd;position:absolute;}
.a{background:red;}
.b{background:yellow;}
#num{overflow:auto;position:absolute;right:0;bottom:0;}
#num li{float:left;height:30px;width:30px;text-align:center;line-height:30px;border:1px solid #CCC;margin-left:10px;cursor:pointer;z-index:2222;}
</style>
<body>
<div id="luanpo">
<ul id="imgs" style="left:0px;">
<li><img src="../imgs/img01.jpg" alt="" width="600" height="300"/></li>
<li><img src="../imgs/img02.jpg" alt="" width="600" height="300"/></li>
<li><img src="../imgs/img03.jpg" alt="" width="600" height="300"/></li>
<li><img src="../imgs/img04.jpg" alt="" width="600" height="300"/></li>
</ul>
<ul id="num">
<li class="a">1</li>
<li class="b">2</li>
<li class="b">3</li>
<li class="b">4</li>
</ul>
</div>
<script type="text/javascript">
var imgs = document.getElementById('imgs').getElementsByTagName('li');
var nums = document.getElementById('num').getElementsByTagName('li');
var img = document.getElementById('imgs');
var timer;
var index = 0;
for(var i = 0; i<nums.length; i++){
nums[i].index = i;
nums[i].onclick = function(){
clearInterval(timer);
for(var j = 0; j<nums.length; j++){
nums[j].className = 'b';
}
index = this.index;
this.className = 'a';
var Left = -(imgs[0].offsetWidth * this.index);
var time = 300;
var interval = 10;
var offset = Left - parseInt(img.style.left);
var speed = offset/(time/interval);
var go = function(){
if(offset == 0){return};
if(parseInt(img.style.left) < Left && speed > 0 || parseInt(img.style.left) > Left && speed < 0 ){
img.style.left = parseInt(img.style.left) + speed +'px';
setTimeout(go,interval);
}
}
go();
}
nums[i].onmouseout = function(){
start();
}
}
function start(){
clearInterval(timer);
timer = setInterval(function(){
if(index == 4){
index = 0;
}else{
img.style.left = -(imgs[0].offsetWidth * index) +'px';
for(var k = 0; k<nums.length; k++){
if(nums[k].index === index){
nums[k].className = 'a';
}else{
nums[k].className = 'b';
}
}
index+=1;
}
},3000);
}
start();
</script>
</body>
</html>
我最后一张图到第一张图的时候 比第一张到第二张慢 是怎么回事啊？ 求指点
题主可以试着用Chrome断点调试试试,在timer部分。
1.前面的第1,第2图片都是每隔3s以后,执行start函数中的for循环。
2.当到了第3张图片,index=3的时候,在for循环中图片的偏移距离为3*length(一张图片的宽度),第四张图片出现，且第四个按钮为红色。之后index为4。
3.此时隔了3s以后,进入函数里面,在if判断中index为4,index被替换为0,跳出函数。
4.再隔了3s以后,进入函数里面,由于index为0,所以图片的偏移距离为0*length(一张图片的宽度),第一张图片出现,且第一个按钮为红色.
所以第四张图片跳到第一张图片的时候,实际上间隔了6s多。其他的都是3s多左右。
在题主的基础上修改了一下。原理就是当index为4的时候,不直接跳出去,而是直接变为0,这样再隔3s进来的时候,就不用判断可以直接处理index为0的状态了。
timer = setInterval(function () {
img.style.left = -(imgs[0].offsetWidth * index) + 'px';
for (var k = 0; k < nums.length; k++) {
if (nums[k].index === index) {
nums[k].className = 'a';
} else {
nums[k].className = 'b';
}
}
index += 1;
if(index == 4){
index = 0;
}
}, 3000);