<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.wrap{
width: 820px;
height: 380px;
background-color: #e3e2e2;
}
.wrap #box{
width: 820px;
height: 340px;
background-color:blue;
overflow:hidden;
}
.wrap #box ul{
width: 4100px;
transition:all 1s;
}
.wrap #box ul li{
width: 820px;
height: 340px;
float: left;
list-style: none;
}
.wrap #box ul li img{
display:block;
}
.wrap #nav li{
float: left;
width: 164px;
height: 40px;
list-style: none;
font-size: 15px;
line-height: 40px;
text-align: center;
}
.wrap #nav .active{
color:#AB8E66;
height: 38px;
background-color: white;
border-bottom:2px solid #AB8E66;
}
</style>
</head>
<body>
<div class="wrap">
<div id="box">
<ul id="navBox">
<li>
<img src="images/1.png" alt="">
</li>
<li>
<img src="images/2.jpg" alt="">
</li>
<li>
<img src="images/3.jpeg" alt="">
</li>
<li>
<img src="images/4.jpeg" alt="">
</li>
<li>
<img src="images/5.jpeg" alt="">
</li>
</ul>
</div>
<ul id="nav">
<li >EDG勇夺夏季赛冠军</li>
<li>金铲铲之战上线福利</li>
<li>S11资格赛</li>
<li>拥抱神力 叱咤魔城</li>
<li>9月12日战斗之夜</li>
</ul>
</div>
<script>
var nav=document.getElementById("nav");
var navLis=nav.getElementsByTagName("li");
var navBox=document.getElementById("navBox");
for(var n=0;n<navLis.length;n++){
navLis[n].index=n;
navLis[n].onmouseenter=function(){
for(var j=0;j<navLis.length;j++){
navLis[j].className="";
}
this.className="active";
navBox.style.marginLeft=-this.index*820+"px";
}
}
</script>
</body>
</html>
