<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
#box{ 500px; height:400px; margin:20px auto; position:relative;}
#div1,#div2{ position:absolute; top:0; }
#div1 div,#div2 div{ 200px; height:300px; border:1px #999 solid; display:none; text-align:center; color:#fff;}
#div1 input,#div2 input{ 62px; height:30px; border:0; color:#fff; background:#333; margin-bottom:2px; }
.active{ background:red !important;}
.bk0{ background:url(../../images/TaylorSwift.jpg) no-repeat center center/contain;}
.bk2{ background:url(../../images/TaylorSwift3.jpg) no-repeat center center/contain;}
.bk3{ background:url(../../images/TaylorSwift4.jpg) no-repeat center center/contain;}
</style>
</head>
<body>
<script>
window.onload=function(){
var t1=new Tab('div1');
// t1.init();
var t2=new Tab('div2');
// t2.init();
t2.autoplay();
}
function Tab(id){
this.oParent = document.getElementById(id);
this.aInput=this.oParent.getElementsByTagName("input");
this.aDiv= this.oParent.getElementsByTagName("div");
this.iNow = 0;
this.init(); // init 可以直接写在这里 new时候自动初始化
}
Tab.prototype.init=function(){
var that=this;
for(var i=0;i<this.aInput.length;i++){
this.aInput[i].index=i;
this.aInput[i].onclick=function(){
that.change(this);
};
}
}// init end
Tab.prototype.change=function(obj){
for(var i=0;i<this.aInput.length;i++){
this.aInput[i].className='';
this.aDiv[i].style.display = 'none';
}
obj.className='active';
this.aDiv[obj.index].style.display = 'block';
}//change
Tab.prototype.autoplay=function(){
var This = this;
setInterval(function(){
if(This.iNow == This.aInput.length-1){
This.iNow = 0;
}
else{
This.iNow++;
}
for(var i=0;i<This.aInput.length;i++){
This.aInput[i].className = '';
This.aDiv[i].style.display = 'none';
}
This.aInput[This.iNow].className = 'active';
This.aDiv[This.iNow].style.display = 'block';
},3000);
}
</script>
<div id="box">
<div id="div1">
<input class="active" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display:block" class="bk0">11111</div>
<div class="bk3">22222</div>
<div class="bk2">33333</div>
</div>
<div id="div2" style="right:0 !important">
<input class="active" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display:block" class="bk3">第二个的1111</div>
<div class="bk0">第二 222</div>
<div class="bk2">第二个33333</div>
</div>
</div>
</body>
</html>