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

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>