JS實現自動定時切換的簡潔網頁選項卡效果
編輯：關於JavaScript
本文實例講述了JS實現自動定時切換的簡潔網頁選項卡效果。分享給大家供大家參考。具體如下：
這是一款簡潔人網頁選項卡，與其它TAB不同的是，本選項卡是自動切換的，在變量裡設定選項卡的內容、切換時間等，它就開始工作了，如果可以響應鼠標的動作就更完美了。
運行效果截圖如下：
在線演示地址如下：
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]="高質量腳本下載";
strArr[2]="歡迎光臨小站";
strArr[3]="精品網頁特效";
function init(){document.getElementById("show").innerHTML = strArr[0];}
function show(){
n=n>strArr.length?1:n;//如果n>數組長度 則重新賦值為1，以便程序循環
for(i=1;i<(strArr.length+1);i++){//這裡for用來改變當前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];//現實數據
n++;
}
setInterval("show()",time);//隔一秒執行一次
//-->
</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程序設計有所幫助。
小編推薦
熱門推薦