                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /Tab选项卡切换效果

为什么这样写，鼠标点到选项上的时候不停了，还是继续切换下去，而且切换速度变快了

<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>