<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com">
<meta name="copyright" content="智能社 - zhinengshe.com">
<title>智能社 - www.zhinengshe.com</title>
<style>
input { 100px; }
input.active { background:yellow; }
div { display:none; 320px; height:200px; background:#ccc; }
div.active { display:block; }
</style>
<script>
window.onload=function (){
var oNextBtn=document.getElementById('next');
var oPrevBtn=document.getElementById('prev');
var aBtn=document.getElementsByTagName('input');
var aDiv=document.getElementsByTagName('div');
var timer=null;
var now=0;
for (var i=0; i<aBtn.length; i++)
{
(function (index){
aBtn[index].onclick=function (){
now=index;
tab();
};
aDiv[i].onmouseover=function (){
clearInterval(timer);
};
aDiv[i].onmouseout=function (){
timer=setInterval(next, 300);
};
})(i);
}
oNextBtn.onclick=next;
oPrevBtn.onclick=function (){
now--;
if (0>now)
{
now=aBtn.length-1;
}
tab();
};
timer=setInterval(next, 300);
function next()
{
now++;
if (now==aBtn.length)
{
now=0;
}
tab();
}
function tab()
{
for (var i=0; i<aBtn.length; i++)
{
aBtn[i].className='';
aDiv[i].className='';
}
aBtn[now].className='active';
aDiv[now].className='active';
}
};
</script>
</head>
<body>
<a href="javascript:;" id="prev">上一张</a>
<input type="button" value="1" class="active" />
<input type="button" value="2" />
<input type="button" value="3" />
<a href="javascript:;" id="next">下一张</a>
<div class="active">111111</div>
<div>2222222</div>
<div>33333333</div>
</body>
</html>
