新手求个自动切换的JSTAB特效
新手求个自动切换的JSTAB特效新手求个自动切换的JSTAB特效新手求个自动切换的JSTAB特效
[解决办法]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>会自动循环播放切换的选项卡丨芯晴网页特效丨CsrCode.Cn</title><style type="text/css">*{list-style:none;margin:0;padding:0;overflow:hidden}.tab1{width:401px;border-top:#A8C29F solid 1px;border-bottom:#A8C29F solid 1px;margin:50px 200px;}.menu{width:400px;background:#eee;height:28px;border-right:#A8C29F solid 1px;border-bottom:#A8C29F solid 1px;}li{float:left;width:99px;text-align:center;line-height:28px;height:28px;cursor:pointer;border-left:#A8C29F solid 1px;color:#666;font-size:14px;overflow:hidden}.menudiv{width:399px;height:300px;border-left:#A8C29F solid 1px;border-right:#A8C29F solid 1px;border-top:0;background:#fefefe}.menudiv div{padding:15px;line-height:28px;}.off{background:#E0E2EB;color:#336699;font-weight:bold}</style><script type="text/javascript">function setTab(name,cursel){ cursel_0=cursel; for(var i=1; i<=links_len; i++){ var menu = document.getElementById(name+i); var menudiv = document.getElementById("con_"+name+"_"+i); if(i==cursel){ menu.className="off"; menudiv.style.display="block"; } else{ menu.className=""; menudiv.style.display="none"; } }}function Next(){ cursel_0++; if (cursel_0>links_len)cursel_0=1 setTab(name_0,cursel_0);} var name_0='one';var cursel_0=1;var ScrollTime=3000;//循环周期（毫秒）var links_len,iIntervalId;onload=function(){ var links = document.getElementById("tab1").getElementsByTagName('li') links_len=links.length; for(var i=0; i<links_len; i++){ links[i].onmouseover=function(){ clearInterval(iIntervalId); this.onmouseout=function(){ iIntervalId = setInterval(Next,ScrollTime);; } } } document.getElementById("con_"+name_0+"_"+links_len).parentNode.onmouseover=function(){ clearInterval(iIntervalId); this.onmouseout=function(){ iIntervalId = setInterval(Next,ScrollTime);; } } setTab(name_0,cursel_0); iIntervalId = setInterval(Next,ScrollTime);}</script></head><body><div class="tab1" id="tab1"> <div class="menu"> <ul> <li id="one1" onclick="setTab('one',1)" class="off">欢迎</li> <li id="one2" onclick="setTab('one',2)">新闻</li> <li id="one3" onclick="setTab('one',3)">介绍</li> <li id="one4" onclick="setTab('one',4)">祝福</li> </ul> </div> <div class="menudiv"> <div id="con_one_1"> <h4 style="color:red">欢迎你来到我们的网站，<br /> 欢迎光临『芯晴网页特效』~<br /> 请记住我们的网址：http://www.CsrCode.cn</h4> </div> <div id="con_one_2" style="display:none;"> <h4 style="color:red">新闻1+1，快乐属于您</h4> </div> <div id="con_one_3" style="display:none;"> <h4 style="color:red">会自动切换的选项卡，很不错。</h4> </div> <div id="con_one_4" style="display:none;"> <h4 style="color:red">希望再来CsrCode.Cn，再见！</h4> </div> </div></div></body></html>