<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>原生js面向对象编程-选项卡(自动轮播)</title>
<style>
#div1 div{
width:400px;
height:300px;
border:1px solid #ccc;
overflow: hidden;
display: none;
margin: 15px 0;
}
#div1 input{
color: #fff;
width:100px;
height:40px;
background: darkseagreen;
border:none;
font-size: 14px;
letter-spacing: 5px;
}
#div1 p{
font-size: 20px;
line-height: 24px;
text-align: center;
color:darkgreen;
}
#div1 .title{
padding: 0;
font-weight: bold;
}
#div1 .active{
background:sandybrown;
color:#fff;
}
</style>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="五言律诗">
<input type="button" value="七言律诗">
<input type="button" value="五言绝句">
<input type="button" value="七言绝句">
<div style="display: block;">
<p class="title">落 花</p>
<p class="author">李商隐</p>
<p>高阁客竟去，小园花乱飞。</p>
<p>参差连曲陌，迢递送斜晖。</p>
<p>肠断未忍扫，眼穿仍欲归。</p>
<p>芳心向春尽，所得是沾衣。</p>
</div>
<div>
<p class="title">蜀 相</p>
<p class="author">杜甫</p>
<p>丞相祠堂何处寻，锦官城外柏森森。</p>
<p>映阶碧草自春色，隔叶黄鹂空好音。</p>
<p>三顾频烦天下计，两朝开济老臣心。</p>
<p>出师未捷身先死，长使英雄泪满襟。</p>
</div>
<div>
<p class="title">八阵图</p>
<p class="author">杜甫</p>
<p>功盖三分国，名成八阵图。</p>
<p>江流石不转，遗恨失吞吴。</p>
</div>
<div>
<p class="title">泊秦淮</p>
<p class="author">杜牧</p>
<p>烟笼寒水月笼沙，夜泊秦淮近酒家。</p>
<p>商女不知亡国恨，隔江犹唱后庭花。</p>
</div>
</div>
<script type="text/javascript">
window.onload = function(){
function Tab(id){
this.wrap = document.getElementById(id);
this.inp = this.wrap.getElementsByTagName('input');
this.div = this.wrap.getElementsByTagName('div');
this.num = 0;
this.timer = null;
}
Tab.prototype = {
constructor : Tab,
init : function(){
var This = this;
this.auto();
this.wrap.onmouseover = function(){
clearInterval(This.timer);
};
this.wrap.onmouseout = function(){
This.auto();
};
},
auto:function(){
var _this = this;
this.timer = setInterval(function(){
_this.num ++;
_this.num %= _this.inp.length;
for(var i=0;i<_this.inp.length;i++){
_this.inp[i].className = '';
_this.div[i].style.display = 'none';
}
_this.inp[_this.num].className = 'active';
_this.div[_this.num].style.display = 'block';
},2000);
}
}
var t = new Tab('div1');
t.init();
}
</script>
</body>
</html>
