<div class="container">
<ul id="box">
<a href="#javascript">
<li class="show">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1487161953058&di=fc5f3f927a478b1a63f6316924bf7667&imgtype=0&src=http%3A%2F%2Fwww.wallcoo.com%2Fanimal%2FMX069_Pretty_Puppies_puppy_garden_adventure%2Fwallpapers%2F1280x1024%2FGarden_adventure_of_the_little_puppy_photos_pictures_puppy_MIL56003.jpg" alt="">
</li>
</a>
<a href="#javascript">
<li>
<img src="http://www.wallcoo.com/animal/Pet-Miniature-Schnauzer/wallpapers/1280x1024/Miniature-Schnauzer-puppy-photo-83448_wallcoo.com.jpg" alt="">
</li>
</a>
<a href="#javascript">
<li>
<img src="http://tupian.enterdesk.com/2012/0831/zyz/04/1345599339UDIPTP.jpg" alt="">
</li>
</a>
</ul>
<div class="btn" id="btn">
<span class="active"></span><i></i>
<span ></span><i></i>
<span ></span><i></i>
</div>
</div>
*{
margin: 0;
padding: 0;
}
.container{
width: 600px;
height: 400px;
border: 1px solid #b6b6b6;
margin: 100px auto;
position: relative;
}
.container ul li {
list-style-type: none;
width:600px;
height: 400px;
transition:1s;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
.container ul li.show{
opacity: 1;
}
.container ul li img{
width: 100%;
height: 100%;
}
.btn{
position: absolute;
z-index: 100;
width: 600px;
height: 30px;
display: flex;
bottom: 5%;
justify-content:center;
}
.btn span{
width: 30px;
height: 30px;
display: block;
border-radius: 50%;
background: #f99;
opacity: 0.8;
}
.btn i {
width: 20px;
height: 20px;
}
.btn span.active{
background: red;
}
var oBtn=document.getElementsByTagName('span');
var oli=document.getElementsByTagName('li')
console.log(oBtn.length)
for(var i=0;i<oBtn.length;i++){
oBtn[i].index=i;
oBtn[i].οnmοuseοver=function(){
for(var i=0;i<oBtn.length;i++){
oBtn[i].className="";
oli[i].className=""
}
this.className="active";
oli[this.index].className="show"
}
}