<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#box {
300px;
height: 300px;
border: black 1px solid;
margin: 50px auto;
font-family:"微软雅黑";
position: relative;
}
#box span {
display: block;
100px;
height: 40px;
line-height:40px;
text-align:center;
float: left;
background: #ccc;
}
#box span:hover {
cursor:pointer;
}
#box div {
wdith: 300px;
height: 260px;
line-height:260px;
text-align: center;
font-size:50px;
display: none;
}
#box .on {
background: #c00;
color: #fff;
}
#prev,
#next {
position: absolute;
top: 135px;
60px;
height: 30px;
display: block;
background: green;
color: #fff;
text-align: center;
line-height: 30px;
text-decoration:none;
font-size: 30px;
}
#prev {
left: 0;
}
#next {
right: 0;
}
</style>
<script>
window.onload = function(){
var oBox = document.getElementById('box');
var aBtn = oBox.getElementsByTagName('span');
var aDiv = oBox.getElementsByTagName('div');
var oNext = document.getElementById('next');
var oPrev = document.getElementById('prev');
var iNow = 0;
var timer = null;
//三个按钮
for(var i = 0; i < aBtn.length; i++){
aBtn[i].index = i;
aBtn[i].onclick = function(){
iNow = this.index;
tab();
}
}
function tab(){
for(var i = 0; i < aBtn.length; i++){
aBtn[i].className = '';
aDiv[i].style.display = 'none';
}
aBtn[iNow].className = 'on';
aDiv[iNow].style.display = 'block';
}
//下一个按钮
oNext.onclick = next;
function next(){
iNow++;
if(iNow == aBtn.length){
iNow = 0;
}
tab();
}
//上一个按钮
oPrev.onclick = prev;
function prev(){
iNow--;
if(iNow == -1){
iNow = aBtn.length - 1;
}
tab();
}
timer = setInterval(next,1000);
oBox.onmouseover = function(){
clearInterval(timer);
}
oBox.onmouseout = function(){
timer = setInterval(next,1000);
}
}
</script>
</head>
<body>
<div id="box">
<a href="javascript:;" id="prev">←</a>
<span class="on">按钮1</span>
<span>按钮2</span>
<span>按钮3</span>
<a href="javascript:;" id="next">→</a>
<div style="display: block;">div1</div>
<div>div2</div>
<div>div3</div>
</div>
</body>
</html>