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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

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