                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /Tab選項(xiàng)卡切換效果

我的輪播效果出了問題，誰可以幫我看一下

下面的a標(biāo)簽相當(dāng)于切換圖片，在a標(biāo)簽掃過幾下后，圖片輪播的時間就不正確了，根本停不下來，是不是定時器的開關(guān)有問題，我看了好多遍代碼，找不出bug

arlenhui

2015-04-27

源自：Tab選項(xiàng)卡切換效果 4-1

關(guān)注問題我要回答

1015

操作

收起

2 回答

一起去看?？?/span>
2015-12-15

每次打開定時器的時候先檢測下現(xiàn)在有定時器運(yùn)行嗎？如果有就清除定時器！

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

hey自然
2015-09-14

你的代碼寫的還好。之所以出現(xiàn)bug是因?yàn)樘珌y。導(dǎo)致timer這個變量有點(diǎn)亂。每次在執(zhí)行一個新計時器時，先在里面清除一下之前的計時器就可以。我把你多余的給你注釋了。你參考一下。

<!doctype?html>
<html>
<head>
<meta?charset="utf-8">
<title>Busy?-?電商</title>
<style>
/*
任務(wù)
????1?.banner_imgs的寬度應(yīng)該等于多少？
????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;
????????????//初始化
????
????//自動切換函數(shù)
????function?play(){
????????index++;
????????if(index>=list.length)?index=0;
????????count(index);
????}
????/*if(timer){
????????clearInterval(timer);
????????timer=null;
????}*/
????timer?=?setInterval(play,1000);
????//切到哪張圖函數(shù)
????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);
????}*/
????//劃過標(biāo)簽切換
?????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>