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

為什么這樣寫，鼠標點到選項上的時候不停了，還是繼續(xù)切換下去，而且切換速度變快了

<head>
????<meta?charset="UTF-8">
????<title>陰陽師</title>
????<style>
????????*{margin:0;padding:0;}
????????.main{
????????????width:800px;
????????????height:600px;
????????????border:2px?solid?silver;
????????????margin:60px?auto;
????????}
????????.main?ul{background:silver;}
????????.main?ul?li{list-style:?none}
????????.top?li{
????????????float:left;
????????????width:200px;
????????????height:50px;
????????????text-align:?center;
????????????font:bold?14px/50px?"Arial?Black";
????????}
????????.top::after{
????????????content:"";
????????????width:0;
????????????height:0;
????????????display:?block;
????????????clear:both;
????????}
????????.active{background:yellow;}
????????.show{display:block;}
????????.hide{display:?none;}
????????#zong?div{width:800px;height:550px;}
????????.main?div:nth-of-type(1){background:?#9e3e3a}
????????.main?div:nth-of-type(2){background:?#ba4a45}
????????.main?div:nth-of-type(3){background:?#7396B8}
????????.main?div:nth-of-type(4){background:?#cc00ff}

????</style>
????<script>
???????window.onload=function(){
???????????var?index=0;
???????????var?nav=document.getElementById("nav");
???????????var?navig=nav.getElementsByTagName("li");
???????????var?zong=document.getElementById("zong");
???????????var?divc=zong.getElementsByTagName("div");
???????????//手動切換選項
???????????for?(var?i?=?0;?i?<?navig.length;?i++)?{
???????????????navig[i].index?=?i;
???????????????navig[i].onmouseover?=?function?()?{
???????????????????clearInterval(timer);
???????????????????for?(i?=?0;?i?<?navig.length;?i++)?{
???????????????????????navig[i].className?=?"";
???????????????????????divc[i].style.display?=?"none";
???????????????????}
???????????????????navig[this.index].className?=?"active";
???????????????????divc[this.index].style.display?=?"block";
???????????????}
???????????????navig[i].onmouseout?=?function?(){
???????????????????var?timer=setInterval(function(){
???????????????????????index++;
???????????????????????if(index>=navig.length){
???????????????????????????index=0;
???????????????????????}
???????????????????????for(var?i=0;i<navig.length;i++){
???????????????????????????navig[i].className="";
???????????????????????????divc[i].style.display?=?"none";
???????????????????????}
???????????????????????navig[index].className="active";
???????????????????????divc[index].style.display="block";
???????????????????},2000);
???????????????}
???????????}
???????????//自動切換選項
???????????var?timer=setInterval(function(){
???????????????index++;
???????????????if(index>=navig.length){
???????????????????index=0;
???????????????}
???????????????for(var?i=0;i<navig.length;i++){
???????????????????navig[i].className="";
???????????????????divc[i].style.display?=?"none";
???????????????}
???????????????navig[index].className="active";
???????????????divc[index].style.display="block";
???????????},2000);
???????}
????</script>
<body>
???????<div?class="main"?id="zong">
???????????<ul?id="nav"?class="top">
???????????????<li?class="active">萌新上路</li><li>式神御魂</li><li>秘聞副本</li><li>斗技陣容</li>
???????????</ul>
???????????<div?class="show">
???????????????<ul>
???????????????????<li></li>
???????????????????<li></li>
???????????????????<li></li>
???????????????</ul>
???????????</div>
???????????<div?class="hide">
???????????????<ul>
???????????????????<li></li>
???????????????????<li></li>
???????????????????<li></li>
???????????????</ul>
???????????</div>
???????????<div?class="hide">
???????????????<ul>
???????????????????<li></li>
???????????????????<li></li>
???????????????????<li></li>
???????????????</ul>
???????????</div>
???????????<div?class="hide">
???????????????<ul>
???????????????????<li></li>
???????????????????<li></li>
???????????????????<li></li>
???????????????</ul>
???????????</div>
???????</div>
</body>
</html>