我的轮播效果出了问题，谁可以帮我看一下
下面的a标签相当于切换图片，在a标签扫过几下后，图片轮播的时间就不正确了，根本停不下来，是不是定时器的开关有问题，我看了好多遍代码，找不出bug
3 回答
你的代码写的还好。之所以出现bug是因为太乱。导致timer这个变量有点乱。每次在执行一个新计时器时，先在里面清除一下之前的计时器就可以。我把你多余的给你注释了。你参考一下。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Busy - 电商</title>
<style>
/*
任务
1 .banner_imgs的宽度应该等于多少？
2 如果让.number 里面a 居中？
*/
body,ul{margin: 0; padding: 0;}
li{list-style: none;}
.banner{
width: 800px;
height: 450px;
margin: 100px auto;
position: relative;
overflow:hidden;
}
.banner_imgs{
width: 500%;
position: absolute;
left: 0; top: 0;
}
.banner_imgs li{
float: left;
}
.banner_imgs img{
width: 800px;
height: 100%;
display: block;
}
.number{
width: 100%;
text-align:center;
position: absolute;
left: 0;
bottom: 20px;
}
.number a{
display: inline-block;
width: 20px;
background-color: #fff;
height: 6px;
overflow: hidden;
}
.number .on{
background-color:red;
}
</style>
<script>
window.onload=function(){
var warp=document.getElementById("warp"),
img=document.getElementById("img"),
list=document.getElementById("num").getElementsByTagName("a"),
index=0,
timer=null;
//初始化
//自动切换函数
function play(){
index++;
if(index>=list.length) index=0;
count(index);
}
/*if(timer){
clearInterval(timer);
timer=null;
}*/
timer = setInterval(play,1000);
//切到哪张图函数
function count(cindex){
for(var i=0;i<list.length;i++){
list[i].className="";
}
list[cindex].className="on";
img.style.left="-"+800*cindex+"px";
index=cindex;
}
//移入容器停止
/* warp.onmouseover=function(){
clearInterval(timer);
timer=null;
}*/
//移出容器开始
/* warp.onmouseout=function(){
timer=setInterval(play,1000);
}*/
//划过标签切换
for(var j=0;j<list.length;j++){
list[j].index=j;
list[j].onmouseover=function(){
clearInterval(timer);
count(this.index);
}
list[j].onmouseout = function(){
timer=setInterval(play,2000);
}
}
}
</script>
</head>
<body>
<div class="banner" id="warp">
<ul class="banner_imgs" id="img">
<li><a href="javascript:;"><img src="http://img1.sycdn.imooc.com//53ad2498000174af13660768.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="http://img1.sycdn.imooc.com//53ad25df0001300613660768.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="http://img1.sycdn.imooc.com//53ad26010001ac1113660768.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="http://img1.sycdn.imooc.com//53ad26170001a86013660768.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="http://img1.sycdn.imooc.com//53ad26320001289e13660768.jpg" alt=""></a></li>
</ul>
<div class="number" id="num">
<a href="javascript:;" class="on"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>举报
0/150
提交
取消
