js轮播图的一个问题求助
<!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>我最后一张图到第一张图的时候 比第一张到第二张慢 是怎么回事啊？ 求指点
展开
收起
1
条回答
写回答
写回答
-
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);2019-07-17 19:00:35赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
