<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
600px;
height: 400px;
border: 1px solid #b6b6b6;
margin: 100px auto;
position: relative;
}
.container ul li {
list-style-type: none;
600px;
height: 400px;
transition:1s;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
.container ul li.show{
opacity: 1;
}
.container ul li img{
100%;
height: 100%;
}
.btn{
position: absolute;
z-index: 100;
600px;
height: 30px;
display: flex;
bottom: 5%;
justify-content:center;
}
.btn span{
30px;
height: 30px;
display: block;
border-radius: 50%;
background: #f99;
opacity: 0.8;
}
.btn i {
20px;
height: 20px;
}
.btn span.active{
background: red;
}
</style>
</head>
<body>
<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="1111">
</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="22222">
</li>
</a>
<a href="#javascript">
<li>
<img src="http://tupian.enterdesk.com/2012/0831/zyz/04/1345599339UDIPTP.jpg" alt="33333">
</li>
</a>
</ul>
<div class="btn" id="btn">
<span class="active"></span><i></i>
<span ></span><i></i>
<span ></span><i></i>
</div>
</div>
</body>
<script>
var oBtn = document.getElementById("btn");
var aSpan = oBtn.getElementsByTagName("span");
var aLi = document.querySelectorAll("#box>a>li");
for(var i=0;i<aSpan.length;i++){
aSpan[i].index = i;
aSpan[i].onmouseover = function() {
for(var j=0;j<aSpan.length;j++){
aSpan[j].className = "";
aLi[j].className = "";
}
aLi[this.index].className = "show";
this.className = "active"
}
}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.active{background: red;}
#content{ 300px;height: 200px;background: #ccc;overflow: hidden;}
#content div{ 300px;height: 200px;}
</style>
</head>
<body>
<button class="active">按钮一</button>
<button>按钮二</button>
<button>按钮三</button>
<div id="content">
<div>页面一</div>
<div>页面二</div>
<div>页面三</div>
</div>
</body>
</html>
<script type="text/javascript">
var tab = {
aBtn:document.getElementsByTagName("button"),
aDiv:document.querySelectorAll("#content>div"),
init:function(){
this.tabToggle();
},
tabToggle:function(){
var _this = this;
for(var i=0;i<this.aBtn.length;i++){
this.aBtn[i].index = i;
this.aBtn[i].onclick = function(){
for(var j=0;j<_this.aBtn.length;j++){
_this.aBtn[j].className = "";
_this.aDiv[j].style.display = "none";
}
this.className = "active";
_this.aDiv[this.index].style.display = "block";
}
}
}
}
tab.init();
</script>