本文實(shí)例講述了JS實(shí)現(xiàn)自動定時(shí)切換的簡潔網(wǎng)頁選項(xiàng)卡效果。分享給大家供大家參考。具體如下：
這是一款簡潔人網(wǎng)頁選項(xiàng)卡，與其它TAB不同的是，本選項(xiàng)卡是自動切換的，在變量里設(shè)定選項(xiàng)卡的內(nèi)容、切換時(shí)間等，它就開始工作了，如果可以響應(yīng)鼠標(biāo)的動作就更完美了。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/js-auto-ds-web-menu-demo/
具體代碼如下：
<html><head><title>自動切換的選項(xiàng)卡</title><style>.tab{width:100px;height:25px;background-color:#ccc;margin:0;padding:0;border-right:1px solid #666;}.tab_on{width:100px;height:25px;background-color:#eee;margin:0;padding:0;border-bottom:1px solid #666;border-top:1px solid #666;border-left:1px solid #666;}#show{width:200px;height:100px;background-color:#eee;border-bottom:1px solid #666;border-top:1px solid #666;border-right:1px solid #666;line-height:30px;}</style><script language="javascript" type="text/javascript"><!--var n=1;var time=1000;var strArr=new Array();strArr[0]="我們提供";strArr[1]="高質(zhì)量腳本下載";strArr[2]="歡迎光臨小站";strArr[3]="精品網(wǎng)頁特效";function init(){document.getElementById("show").innerHTML = strArr[0];}function show(){ n=n>strArr.length?1:n;//如果n>數(shù)組長度 則重新賦值為1，以便程序循環(huán) for(i=1;i<(strArr.length+1);i++){//這里for用來改變當(dāng)前tab的classname if(i==n) document.getElementById("tab_"+i).className = "tab_on"; else document.getElementById("tab_"+i).className = "tab"; } document.getElementById("show").innerHTML = strArr[n-1];//現(xiàn)實(shí)數(shù)據(jù) n++;} setInterval("show()",time);//隔一秒執(zhí)行一次//--></script></head><body onload="init()"><table border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#eeeeee"> <tr> <td align="right"> <div id="tab_1" class="tab_on">ASP</div> <div id="tab_2" class="tab" >PHP</div> <div id="tab_3" class="tab" >JSP</div> <div id="tab_4" class="tab">JAVA</div> </td> <td bgcolor="#eeeeee"> <div id="show"></div> </td> </tr></table></body></html>希望本文所述對大家的JavaScript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
