<!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>