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

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

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

收起

1回答

小于飞飞 2017-03-27 17:54:33

你好，在chrome浏览器下测试你写的代码，鼠标经过导航后，然后离开后，可以继续轮播，是说的这个不正常轮播吗？祝学习愉快。

收起回答

提问者永不止息L #1

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

2017-03-29 01:29:15
小于飞飞回复提问者永不止息L #2

你好，明白你的意思了，第一个保持的背景状态，说明当前显示的是有背景的那个项。而移动到的二个是因为设置了nav>li:hover 样式，无论移动到哪项都这样，点击才消失，因为js代码中 nav[d].onclick=function(){} ，点击后显示相应项内容。所以，看你想实现什么效果，一种把nav>li:hover 去掉，二，改为nav[d].onmouseover=function(){} , 希望对你有帮助，祝学习愉快。

2017-03-29 15:34:25
提问者永不止息L 回复小于飞飞 #3

非常感谢！

2017-03-31 03:23:12