JS實現(xiàn)自動定時切換的簡潔網(wǎng)頁選項卡效果
更新時間：2015年10月13日 11:06:24 作者：企鵝
這篇文章主要介紹了JS實現(xiàn)自動定時切換的簡潔網(wǎng)頁選項卡效果,涉及JavaScript基于時間函數(shù)定時觸發(fā)遍歷函數(shù)實現(xiàn)定時切換功能,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)自動定時切換的簡潔網(wǎng)頁選項卡效果。分享給大家供大家參考。具體如下：
這是一款簡潔人網(wǎng)頁選項卡，與其它TAB不同的是，本選項卡是自動切換的，在變量里設(shè)定選項卡的內(nèi)容、切換時間等，它就開始工作了，如果可以響應(yīng)鼠標(biāo)的動作就更完美了。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-auto-ds-web-menu-demo/
具體代碼如下：
<html>
<head>
<title>自動切換的選項卡</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ù)據(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è)計有所幫助。
相關(guān)文章
SVG(可縮放矢量圖形)，接下來將介紹下如何判斷瀏覽器是否支持SVG,感興趣的朋友可以參考下哈，希望本代碼對你有所幫助2013-03-03
javascript函數(shù)的四種調(diào)用模式
本文詳細(xì)介紹了javascript函數(shù)的四種調(diào)用模式。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
掌握document.getElementById() 根據(jù)id獲取元素,在頁面畫出一個寬200 高200 粉色的盒子, 在控制臺打印這個盒子,接到這樣的需求如何處理呢,下面小編給大家分享webapi根據(jù)id獲取元素的實現(xiàn)思路,感興趣的朋友一起看看吧2024-02-02
JavaScript類型檢測之typeof 和 instanceof 的缺陷與優(yōu)化
在javascript中，typeof 和 instanceof 是用來判斷數(shù)據(jù)類型比較通用的兩個方法，這篇文章的目的是通過對這兩個方法介紹來分析其存在的不足并提出優(yōu)化方案2016-01-01
本文將介紹瀏覽器解壓和服務(wù)器解壓兩種在線解壓ZIP文件的方案。幫助大家用JavaScript實現(xiàn)在線解壓，感興趣的朋友可以參考下2021-05-05
JS/FLASH實現(xiàn)復(fù)制代碼到剪貼板(兼容所有瀏覽器)
使用javascript來寫復(fù)制到剪貼板的代碼，一般都是瀏覽器不兼容的。所以采用flash的方式，模擬一個層，再來復(fù)制，就可以做到全部瀏覽器都適用，具體實現(xiàn)如下，感興趣的朋友可以參考下哈2013-05-05
圖片輪換的效果隨處可見，但是我還是試著封裝了一個函數(shù)。一個頁面上可以多次調(diào)用。。。由于初學(xué)代碼寫的不是多好，其中有個文件是可以踢出到一個js文件里的，這是為了測試方便，我都給放在了一個頁面里了。2011-09-09
JS?requestVideoFrameCallback()?簡單案例
這篇文章主要介紹了JS?requestVideoFrameCallback()簡單案例，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-07-07
js判斷瀏覽器的環(huán)境（pc端，移動端，還是微信瀏覽器）
這篇文章主要介紹了js判斷瀏覽器的環(huán)境（pc端，移動端，還是微信瀏覽器），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
js 提交form表單和設(shè)置form表單請求路徑的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s 提交form表單和設(shè)置form表單請求路徑的實現(xiàn)方法。2016-10-10