鼠标离开导上一个航栏，滑动到下一个，导航栏还是被选中的状态，要点击下一个后，上一个的选中状态才会消失

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
 
    *{
   padding: 0;
   margin: 0;
   font-family:Microsoft YaHei;
   text-decoration: none;
   margin:  auto;
}
 
.main{width:1220px;height:500px;border:solid 0.001px #DDDDDD;margin-top: 10px;  overflow: hidden;
}
 
nav{
width:1200px;
line-height: 30px;
text-align:center;
display: block;
position: relative;
 
 
}
 
    nav>li{color: gray;
float:left;
width:300px;
text-align:center;
   text-decoration: none;
   list-style-type: none;
   
 
}
 
.on,nav>li:hover{
background:#FFCC00;
border-radius:5%;
cursor:pointer;
 
}
 
 
 
 
 
.banner{width:1200px;
     
height:460px;
margin-top: 30px;
}
 
 
.banner-slide{
width: 1200px;
height: 460px;
position: absolute;
background-repeat: no-repeat;
display: none;
}
.slide-active{
display: block;
}
.slide1{
background: url(1.jpg);
}
.slide2{
background: url(3.jpg);
}
.slide3{
background: url(4.jpg);
}
.slide4{
background: url(5.jpg);
}
 
 
    </style>
 
     
 
 
</head>
<body>
 
<div class="main" id="main">
 
 
 
 
 
<header>
 
 
    <nav id="nav">
       <li class="on"><a href="#">首页</a></li>
        <li><a href="#">点击看看</a></li>
        <li><a href="#">会自动的</a></li>
        <li><a href="#">我的网站</a></li>
        </nav>
</header>
         
 
 
<div class="banner" id="banner">
 
 
        <a href="">
<div class="banner-slide slide1 slide-active"></div>
</a>
<a href="">
<div class="banner-slide slide2"></div>
</a>
<a href="">
<div class="banner-slide slide3"></div>
</a>
<a href="">
<div class="banner-slide slide4"></div>
</a>
         </div>
 
 
 
 
 
 
</div>
 
<script type="text/javascript">
         
function byId(id){
    return typeof(id)==="string"?document.getElementById(id):id;
}
 
//全局变量
var index=0,
timer=null,
img=byId("banner").getElementsByTagName("div"),
nav=byId("nav").getElementsByTagName("li"),
len=img.length;
 
 
 
 
function slideImg(){
var main=byId("main");
//滑过清除定时器，离开继续
main.onmouseover =function(){
    //滑过清除定时器
 
    if(timer) clearInterval(timer);
        //if条件成立 且后面只有一句时 可以不加大括号
}
main.onmouseout=function(){
timer=setInterval(function(){
    index++;
    if(index >= len){index=0;}
 
    //切换图片
    changeImg();
 
 
},2000);
}
 
//自动在main上触发鼠标滑过事件
main.onmouseout();
//遍历所有导航，且绑定事件，点击导航切换图片
for(var d=0;d<len;d++){
    //给所有li添加一个id的属性，作为当前li的索引
    nav[d].id=d;
 
    nav[d].onclick=function(){
//改变index为当前nav的索引
index=this.id;
 
//导航栏随图片轮播
 
 
 
//调用切换图片的函数changImg,实现切换图片
 
 
changeImg();
     
}
 
 
}
 
 
}
 
//切换图片
function changeImg(){
//遍历banner下所有div以及nav下所有li，将div隐藏,li清除
for(var i=0;i<len;i++){img[i].style.display="none";nav[i].className="";}
 
//根据index索引找到当前div和当前li，将其显示出来和设为当前
    img[index].style.display="block";
nav[index].className="on";
 
 
     
}
     
 
 
slideImg();
 
 
         
    </script>
 
</body>
</html>

鼠标离开导航栏以后，导航栏不会自动恢复，要点击了其他导航栏才恢复，怎么破？

当我的鼠标离开第一导航栏，移动到第二个导航栏的时候，第一个导航栏还是被选中的那种状态（阴影），只有当我点击了第二个导航栏的时候，第一个导航栏的被选中状态才会消失。我想知道，怎么才可以，当我的鼠标一离开导航栏，导航栏的被选中状态就自动消失了。

永不止息L 2017-03-29

源自：项目：JavaScript实现轮播特效 6-2 作业题