思路：
（1）先写一个点击显示对应内容的选项卡
（2）增加一个定时器，定时器里继续放一个选项卡
注：两个通过让对应的下标来联系起来
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选项卡</title> <style type="text/css"> #ul_box{list-style: none;margin:0;padding:0;overflow: hidden;} #ul_box{margin:0;padding:0;} #ul_box li{float: left;width: 150px;height: 30px;border: 1px solid #ccc;} #ul_box li.active{background: yellow;} div{width: 200px;height: 200px;background: #ccc;display: none;} </style> </head> <body> <ul id="ul_box"> <li>aa</li> <li>bb</li> <li>cc</li> <li>dd</li> </ul> <div>你好</div> <div>我好</div> <div>大家好</div> <div>每天</div> </body> <script type="text/javascript"> var oUl=document.getElementById('ul_box'); var aLi=oUl.getElementsByTagName('li'); var aDiv=document.getElementsByTagName('div'); var iNum=0; aLi[iNum].className='active'; aDiv[iNum].style.display='block'; for(i=0;i<aLi.length;i++){ aLi[i].index=i; aLi[i].onclick=function(){ for(i=0;i<aLi.length;i++){ aLi[i].className=''; aDiv[i].style.display='none'; } iNum=this.index; this.className='active'; aDiv[iNum].style.display='block'; } } setInterval(function(){ iNum++; if(iNum>=aLi.length){ iNum=0; } for(i=0;i<aLi.length;i++){ aLi[i].className=''; aDiv[i].style.display='none'; } aLi[iNum].className='active'; aDiv[iNum].style.display='block'; },3000) </script> </html>