选项卡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.wfuyu.com/--><div id="divForumBoard"></div><div id="divForumCast" style="padding:8px;height:200px"><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7651.html" _fcksavedurl="http://www.wfuyu.com/a/view/7651.html">网易有道推返利频道 细看与腾讯</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7612.html" _fcksavedurl="http://www.wfuyu.com/a/view/7612.html">刷广告就可以赚钱 小心加盟进传</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7450.html" _fcksavedurl="http://www.wfuyu.com/a/view/7450.html">戴坚定从必和必拓中国区公司离职</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7665.html" _fcksavedurl="http://www.wfuyu.com/a/view/7665.html">谷歌中国＂我的帐户＂登陆悄悄的</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7636.html" _fcksavedurl="http://www.wfuyu.com/a/view/7636.html">奥斯特诞辰 Google中国推Logo纪</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7717.html" _fcksavedurl="http://www.wfuyu.com/a/view/7717.html">Google Logo只显一半 故意还是BU</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7594.html" _fcksavedurl="http://www.wfuyu.com/a/view/7594.html">谷歌否认开放Caffeine是对付微软</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7624.html" _fcksavedurl="http://www.wfuyu.com/a/view/7624.html">贾君鹏,你妈妈喊你用某某IDC产品</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7628.html" _fcksavedurl="http://www.wfuyu.com/a/view/7628.html">中国搜索营销道路漫长 谷歌欢迎</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7461.html" _fcksavedurl="http://www.wfuyu.com/a/view/7461.html">雅虎总裁巴茨称：我们不是搜索公</A> </DIV></div><div id="divForumPanel" style="padding:8px;height:210px"><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7488.html" _fcksavedurl="http://www.wfuyu.com/a/view/7488.html">免费获取Adobe Flash Builder 4 </A></DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7561.html" _fcksavedurl="http://www.wfuyu.com/a/view/7561.html">中国区域地图Flash组件说明(附源</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7643.html" _fcksavedurl="http://www.wfuyu.com/a/view/7643.html">让UL在div中居中并横排显示的方</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7495.html" _fcksavedurl="http://www.wfuyu.com/a/view/7495.html">M8音乐网:寻求无序随机的音乐收</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7471.html" _fcksavedurl="http://www.wfuyu.com/a/view/7471.html">xara3D与firework配合打造3D特效</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7648.html" _fcksavedurl="http://www.wfuyu.com/a/view/7648.html">新农网(xinnong.com)中国第一农</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7642.html" _fcksavedurl="http://www.wfuyu.com/a/view/7642.html">CSS教程:Float菜单水平居中的实</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7644.html" _fcksavedurl="http://www.wfuyu.com/a/view/7644.html">网页实例代码:单行新闻纵向滚动</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7538.html" _fcksavedurl="http://www.wfuyu.com/a/view/7538.html">JavaScript优化篇:汉字转换为拼</A> </DIV><DIV class=rp_2equalcol><A href="http://www.wfuyu.com/a/view/7641.html" _fcksavedurl="http://www.wfuyu.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.wfuyu.com/ target=_blank _fcksavedurl="http://www.wfuyu.com/ target=_blank">http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠