首页 > 网络编程 > JavaScript > javascript技巧 > 自动轮换 页签 tab 可以自动轮换的页签 tabs with auto play fucntion 2008-02-02 21:07:49 作者： HTML、CSS方面改写了一下结构，用了一个DL javascript方面可以选择不断自动循环，或者只循环一次的，点击以后继续循环，或者停止循环 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <title> tabs with auto play function </title> <meta name="Design Corp" content="Agenda" /> <meta name="robots" content="all" /> <style type="text/css" media="screen"> <!-- body,dl,dt,dd{font:12px/1.5em arial;padding:0;margin:0;} body{margin:25px;} img{border:0;} a:link{color:#369;text-decoration: none; } a:hover{color:#c83;} .tab{zoom:1;overflow:hidden;width:150px;border:1px solid #ccc;} .tab dt{float:left;width:50px;background: #eee;text-align: center;padding:2px 0;text-decoration: none;color:#666;cursor:pointer;} .tab dt a{text-decoration: none;color:#666;} .tab dt a:hover{text-decoration: none;color:#c83;} .tab dt.on, .tab dt.on a, .tab dt:hover{background: #fff;color:#c83;} .tab dd{display:none;clear:both;} .tab dd.on{display:block;} .tab dd img{display:block;padding-top:3px;height: 93px;width: 150px;} .tab dd a{padding:5px;} --> </style> <script type="text/javascript"> <!-- window.onload = function(){ function timertab(t,a){ //t为要应用此函数的tab的id，a初始化时显示的项目的顺序数 this.obj = document.getElementById(t).getElementsByTagName("dt");//导航 this.eles = document.getElementById(t).getElementsByTagName("dd");//内容 this.start = a-1;//初始项目 this.speed = 2000;//切换间隔 this.setid = null;//定时器 var loop = function(){ //自动切换 for(var i=0,j=obj.length;i<j;i++){ obj[i].className = ""; eles[i].className = ""; } obj[start].className = "on"; eles[start].className = "on"; setid=setTimeout(loop,speed); start++; if(start==obj.length){ start=0; //clearTimeout(setid);//只循环一次 } };loop(); var clik = function(){ //点击 for(var i=0;i<obj.length;i++){ obj[i].onclick = function(){ clearTimeout(setid);//停止原来的自动切换 var inb = this.id.substr(this.id.indexOf("#")+6,1);//这里的数字6为dt的id中数字序号出现的位置数 for(var i=0,j=obj.length;i<j;i++){//重新初始化 obj[i].className = ""; eles[i].className = ""; } this.className = "on";//显示点击项 eles[inb-1].className = "on"; start=inb-1;//从这里开始继续循环（可以根据要求选择是否去掉这部分） loop(); return false //取消<a href="#tabs_01">默认事件 } } };clik(); } timertab("tab_01",2); } //--> </script> </head> <body> <dl id="tab_01" class="tab"> <dt id="tab_01"><a href="#tabs_01">tab_01</a></dt> <dt id="tab_02"><a href="#tabs_02">tab_02</a></dt> <dt id="tab_03"><a href="#tabs_03">tab_03</a></dt> <dd id="tabs_01"><img src="1.jpg" alt="1.jpg" /><a href="#">link1</a></dd> <dd id="tabs_02"><img src="2.jpg" alt="2.jpg" /><a href="#">link2</a></dd> <dd id="tabs_03"><img src="3.jpg" alt="3.jpg" /><a href="#">link3</a></dd> </dl> </body> </html> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] <html> <head> <meta name="GENERATOR" content="Microsoft FrontPage 6.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>a1 a2 a3</title> <style type="text/css" media="screen"> <!-- *{font:12px/1.5em arial;} img{border:0;} a:link{color:#369;text-decoration: none; } a:hover{color:#c83;} #tt{zoom:1;overflow:hidden;width:152px;border:1px solid #ccc;border-width:1px 1px 0;} #tt a{float:left;width:50px;background: #eee;text-align: center;padding:2px 0;text-decoration: none;color:#666; } #tt a.on, #tt a:hover{background: #fff;color:#c83;} #ct{width:150px;border:1px solid #ccc;border-width:0 1px 1px;} #ct div{display:none;} #ct div.on{display:block;} #ct img{display:block;padding-top:3px;height: 93px;width: 150px;} #ct a{padding:5px;} --> </style> </head> <body> <script> /*参数说明： t：导航容器的ID to：导航的单位元素标签 c：内容的容器ID co：内容的单位元素标签 s：初始化时的当前项 a：内容的单位元素标签ID中的数字序号的位置<div id="i1">(对应的a为2) */ function timertab(t,to,c,co,s,a){ this.obj = document.getElementById(t).getElementsByTagName(to);//导航对象 this.eles = document.getElementById(c).getElementsByTagName(co);//内容项 this.start = s-1;//初始项目 this.speed = 2000;//切换间隔 this.setid = null;//定时器 var loop = function(){ //自动切换 for(var i=0,j=obj.length;i<j;i++){//初始化 obj[i].className = ""; eles[i].className = ""; } obj[start].className = "on";//当前项 eles[start].className = "on"; setid=setTimeout(loop,speed);//开始自动切换 start++; if(start==obj.length){ start=0; } };loop(); var clik = function(){ //点击 for(var i=0;i<obj.length;i++){ obj[i].onclick = function(){ clearTimeout(setid);//停止原来的自动切换 var inb = this.href.substr(this.href.indexOf("#")+a,1); for(var i=0,j=obj.length;i<j;i++){ obj[i].className = ""; eles[i].className = ""; } this.className = "on"; eles[inb-1].className = "on"; /*从点击项开始自动切换，此功能可以选择去掉*/ start=inb-1; loop(); } } };clik(); var m_over = function(){//鼠标指向暂停自动切换 for(var i=0;i<obj.length;i++){ eles[i].onmouseover = function(){clearTimeout(setid)}; } };m_over(); var m_out = function(){//鼠标离开继续自动切换 for(var i=0;i<obj.length;i++){ eles[i].onmouseout = function(){setid=setTimeout(loop,speed)}; } };m_out(); } </script> <div id="tt"> <a href="#i1">a1</a> <a href="#i2">a2</a> <a href="#i3">a3</a> </div> <div id="ct"> <div id="i1"> <img src="http://case.blueidea.com/files/2008/01/31/work_219030_4249_20080131_092244_3681946_t.png" alt="作品4249" /> <a href="http://case.blueidea.com/works/view/4249/" target="_blank">作品4249</a> </div> <div id="i2"> <img src="http://case.blueidea.com/files/2008/01/30/work_185979_4240_20080130_144901_6762390_t.jpg" alt="作品4240" /> <a href="http://case.blueidea.com/works/view/4240/" target="_blank">作品4240</a> </div> <div id="i3"> <img src="http://case.blueidea.com/files/2008/01/30/work_365161_4245_20080130_202513_1560669_t.jpg" alt="作品4245" /> <a href="http://case.blueidea.com/works/view/4245/" target="_blank">作品4245</a> </div> </div> <script type="text/javascript"> <!-- timertab("tt","a","ct","div",2,2); //--> </script> </body> </html> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
