效果如图:
具体代码:
代码如下 | 复制代码 |
*{ margin: 0; padding: 0; font-size: 12px; font-family: "微软雅黑"; color: #000000; text-decoration: none; list-style-type: none; } #tab-list{ width: 275px; height: 190px; margin: 30px auto; } #list{ height: 32px; border-bottom: #8B4513 2px solid; } #list li{ display: inline-block; width: 60px; border: 1px solid #999999; border-bottom: none; line-height: 30px; margin-left: 5px; text-align: center; cursor: pointer; } #list .active{ border-top: 2px solid #8B4513; border-bottom: 2px solid #fff; } #tab-list div{ border: 1px solid #7396B8; border-top: none; } #tab-list div li{ height: 30px; line-height: 30px; text-indent: 8px; } #tab-list .show{ display: block; } #tab-list .hidden{ display: none; }
window.onload=function(){ var tab=document.getElementById('tab-list'); var list=document.getElementById('list').getElementsByTagName('li'); var div=tab.getElementsByTagName('div'); var timer=null; var index=0; for(var i=0;i list[i].num=i; list[i].onmouseover=function(){ Change(this.num); } } function Change(curIndex){ for(vari=0;i list[i].className=""; div[i].className="hidden"; } list[curIndex].className="active"; div[curIndex].className="show"; index=curIndex; } //自动播放 function autoPlay(){ timer=setInterval(function(){ index++; if(index > list.length - 1){ index=0; } Change(index); },2000); } autoPlay(); tab.onmouseover=function(){ clearInterval(timer); } tab.onmouseout=function(){ autoPlay(); } }
|