選項卡Tab定時自動切換的代碼[js+css]

　　網(LieHuo.Net)教程 JavaScript配合CSS制作一個能自動切換的網頁選項卡,每隔一段時間,它就自動切換選項卡列表和標題,時間自設,這里要注意,用于產生changeTabInterval的隨機數，防止頁面上TabPane過多，如果設置的changeTabInterval都一樣的話會產生整齊劃一的切換的效果，不美觀.

<title>自動切換Tab選項卡 - LIEHUO.NET</title><script type="text/javascript">function randint(m,n)//產生m-n之間的隨機整數{ return Math.random()*(n-m)+m;}function IfNull(a,dv){ return typeof(a) =="undefined"?dv:a;}var TabPaneConfig = { idPrefix: "tab-panel-object-", idCounter: 0, getId: function(){ return this.idPrefix+this.idCounter++;}, tabHeadId: "tabHead", tabHeadClass: "tab-head tab-border", tabBodyId: "tabBody", tabBodyClass: "tab-border"}function TabPane(id,changeTabInterval,isAutoChangeTab){ this.id = id; this.height = "100%"; this.width = "100%"; this.tabPages = 0; this.head = null; this.body = null; this.changeTabInterval=IfNull(changeTabInterval,10); this.isAutoChangeTab=IfNull(isAutoChangeTab,true); this.changeTabTimerId = null; }TabPane.prototype.init = function(){ var r = document.getElementById(this.id); if(!r.style.overflow) r.style.overflow = "auto"; r.className = "tab"; //create head var div = document.createElement("div"); div.id = TabPaneConfig.tabHeadId; div.className = TabPaneConfig.tabHeadClass; r.appendChild(div); this.head = div; var ul = document.createElement("ul"); div.appendChild(ul); //create body div = document.createElement("div"); div.id = TabPaneConfig.tabBodyId; div.className = TabPaneConfig.tabBodyClass; r.appendChild(div); this.body = div; if(this.isAutoChangeTab) { var tabPane = this; this.changeTabTimerId = setInterval(function(){onChangeTabTimer(tabPane);},this.changeTabInterval*1000); } }TabPane.prototype.stopChangeTabTimer = function (){ if(this.isAutoChangeTab) { clearInterval(this.changeTabTimerId); }}TabPane.prototype.addTabPage = function(obj){ if(!document.getElementById(obj.panel)) return; if(!this.tabPages) this.init(); this.head.firstChild.appendChild(this.createTabTitle(obj)); this.body.appendChild(document.getElementById(obj.panel)); this.tabPages++;}TabPane.prototype.createTabTitle = function(obj){ var li = document.createElement("li"); li.id = TabPaneConfig.getId(); li.data = obj.panel; var tabPane = this; li.onclick=function(){tabOnClick(tabPane,li)}; li.style.width = obj.width; if(this.tabPages) { li.className=""; document.getElementById(obj.panel).style.display="none"; } else { li.className="hover"; document.getElementById(obj.panel).style.display="block"; } var textNode = document.createTextNode(obj.title); li.appendChild(textNode); return li;}//得到所有Tab頁的Li元素TabPane.prototype.getLiArr = function(){ return this.head.firstChild.children;}TabPane.prototype.getAcitveLi = function(){ var liArr = this.getLiArr(); for(var i=0; i<liArr.length; i++) { if(liArr[i].className=="hover") { return liArr[i]; } } }//切換到指定的li對應的Tab頁TabPane.prototype.changeToTab = function (li){ var liArr = this.getLiArr(); for(var i=0; i<liArr.length; i++) { liArr[i].className=""; document.getElementById(liArr[i].data).style.display="none"; } li.className="hover"; document.getElementById(li.data).style.display="block"; }//得到v在數組arr中的序號function indexOf(arr,v){ for(var i = arr.length; i-- && arr[i] !== v;); return i; }function onChangeTabTimer(tabPane){var liArr = tabPane.getLiArr(); var activeLi = tabPane.getAcitveLi(); var i = indexOf(liArr,activeLi); var nexti = (i+1+liArr.length)%liArr.length; var nextLi = liArr[nexti]; tabPane.changeToTab(nextLi);}function tabOnClick(tabPane,li){ tabPane.stopChangeTabTimer(); tabPane.changeToTab(li);}</script><style>.tab {font-family: Verdana, Helvetica, Arial;font-size: 12px;position: relative;width: 100%;}.tab-border {border:1px solid;border-color: rgb(120,172,255);}.tab-head {background-color:rgb(234,242,255);;border:0px;height:23px;line-height:20px;position:relative;}.tab-head ul{border:0px;height:23px;list-style:none;margin:0px;text-align:center;padding:0;position:absolute;}.tab-head li{border: 1px solid;border-color: rgb(120,172,255);border-left: 0;border-bottom: 0;border-top: 0;cursor:pointer;color:#416AA3;float:left;display:block;height:22px;!important;height:20px;line-height:20px;padding: 2px 6px 0px 6px;margin-top: 2px;margin-right: -1px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}.tab-head li.hover{border: 1px solid rgb(120,172,255);border-bottom: 0;padding: 0px 6px 3px 6px;margin: 0px 1px 0px 0px;background: white;font-size: 13px;font-weight: bold;color: rgb(0,66,174);overflow:visible;}</style><div id="rptopmain_right_middle_right"><!--站長技術http://www.jyygyx.com/--><div id="divForumBoard"></div><div id="divForumCast" style="padding:8px;height:200px"><DIV class=rp_2equalcol><A href="http://www.jyygyx.com/a/view/7651.html" _fcksavedurl="http://www.jyygyx.com/a/view/7651.html">網易有道推返利頻道 細看與騰訊</A> </DIV><DIV class=rp_2equalcol><A href="http://www.jyygyx.com/a/view/7612.html" _fcksavedurl="http://www.jyygyx.com/a/view/7612.html">刷廣告就可以賺錢 小心加盟進傳</A> </DIV><DIV class=rp_2equalcol><A href="http://www.jyygyx.com/a/view/7450.html" _fcksavedurl="http://www.jyygyx.com/a/view/7450.html">戴堅定從必和必拓中國區公司離職</A> </DIV><DIV class=rp_2equalcol><A href="http://www.jyygyx.com/a/view/7665.html" _fcksavedurl="http://www.jyygyx.com/a/view/7665.html">谷歌中國＂我的帳戶＂登陸悄悄的</A> </DIV><DIV class=rp_2equalcol><A href="http://www.jyygyx.com/a/view/7636.html" _fcksavedurl="http://www.jyygyx.com/a/view/7636.html">奧斯特誕辰 Google中國推Logo紀</A> </DIV><DIV class=rp_2equalcol><A href="http://www.jyygyx.com/a/view/7717.html" _fcksavedurl="http://www.jyygyx.com/a/view/7717.html">Google Logo只顯一半 故意還是BU</A> </DIV><DIV class=rp_2equalcol><A href="http://www.jyygyx.com/a/view/7594.html" _fcksavedurl="http://www.jyygyx.com/a/view/7594.html">谷歌否認開放Caffeine是對付微軟</A> </DIV><DIV class=rp_2equalcol><A href="http://www.jyygyx.com/a/view/7624.html" _fcksavedurl="http://www.jyygyx.com/a/view/7624.html">賈君鵬,你媽媽喊你用某某IDC產品</A> </DIV><DIV class=rp_2equalcol><A href="http://www.jyygyx.com/a/view/7628.html" _fcksavedurl="http://www.jyygyx.com/a/view/7628.html">中國搜索營銷道路漫長 谷歌歡迎</A> </DIV><DIV class=rp_2equalcol><A href="http://www.jyygyx.com/a/view/7461.html" _fcksavedurl="http://www.jyygyx.com/a/view/7461.html">雅虎總裁巴茨稱：我們不是搜索公</A> </DIV></div><div id="divForumPanel" style="padding:8px;height:210px"><DIV class=rp_2equalcol><A href="http://www.jyygyx.com/a/view/7488.html" _fcksavedurl="http://www.jyygyx.com/a/view/7488.html">免費獲取Adobe Flash Builder 4 </A></DIV><DIV class=rp_2equalcol><A href="http://www.jyygyx.com/a/view/7561.html" _fcksavedurl="http://www.jyygyx.com/a/view/7561.html">中國區域地圖Flash組件說明(附源</A> </DIV><DIV class=rp_2equalcol><A href="http://www.jyygyx.com/a/view/7643.html" _fcksavedurl="http://www.jyygyx.com/a/view/7643.html">讓UL在div中居中并橫排顯示的方</A> </DIV><DIV class=rp_2equalcol><A href="http://www.jyygyx.com/a/view/7495.html" _fcksavedurl="http://www.jyygyx.com/a/view/7495.html">M8音樂網:尋求無序隨機的音樂收</A> </DIV><DIV class=rp_2equalcol><A href="http://www.jyygyx.com/a/view/7471.html" _fcksavedurl="http://www.jyygyx.com/a/view/7471.html">xara3D與firework配合打造3D特效</A> </DIV><DIV class=rp_2equalcol><A href="http://www.jyygyx.com/a/view/7648.html" _fcksavedurl="http://www.jyygyx.com/a/view/7648.html">新農網(xinnong.com)中國第一農</A> </DIV><DIV class=rp_2equalcol><A href="http://www.jyygyx.com/a/view/7642.html" _fcksavedurl="http://www.jyygyx.com/a/view/7642.html">CSS教程:Float菜單水平居中的實</A> </DIV><DIV class=rp_2equalcol><A href="http://www.jyygyx.com/a/view/7644.html" _fcksavedurl="http://www.jyygyx.com/a/view/7644.html">網頁實例代碼:單行新聞縱向滾動</A> </DIV><DIV class=rp_2equalcol><A href="http://www.jyygyx.com/a/view/7538.html" _fcksavedurl="http://www.jyygyx.com/a/view/7538.html">JavaScript優化篇:漢字轉換為拼</A> </DIV><DIV class=rp_2equalcol><A href="http://www.jyygyx.com/a/view/7641.html" _fcksavedurl="http://www.jyygyx.com/a/view/7641.html">汽車系列:馬自達壁紙詳細制作步</A> </DIV></div><script> var tp = new TabPane("divForumBoard",randint(3,10)); tp.addTabPage({title:"站長新聞" ,width:100 ,panel:"divForumCast"}); tp.addTabPage({title:"建站技術" ,width:100 ,panel:"divForumPanel"}); </script></div></div><br /><center>網更多教程，請訪問：<a href=http://www.jyygyx.com/ target=_blank _fcksavedurl="http://www.jyygyx.com/ target=_blank">http://www.jyygyx.com/</a></center>
提示：可修改后代碼再運行!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈