可以自動輪換的頁簽 tabs with auto play fucntion

2019-11-21 01:49:01

字體：大中小

來源：轉載

供稿：網(wǎng)友

<!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">  </style> <script type="text/javascript">  </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="https://www.jb51.net/article/1.jpg" alt="1.jpg" /><a href="#">link1</a></dd>     <dd id="tabs_02"><img src="https://www.jb51.net/article/2.jpg" alt="2.jpg" /><a href="#">link2</a></dd>     <dd id="tabs_03"><img src="https://www.jb51.net/article/3.jpg" alt="3.jpg" /><a href="#">link3</a></dd> </dl> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

<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">  </style> </head> <body> <script> /*參數(shù)說明： t：導航容器的ID to：導航的單位元素標簽 c：內容的容器ID co：內容的單位元素標簽 s：初始化時的當前項 a：內容的單位元素標簽ID中的數(shù)字序號的位置<div   class="iwvjtn8m0"   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(){//鼠標離開繼續(xù)自動切換        for(var i=0;i<obj.length;i++){            eles[i].onmouseout = function(){setid=setTimeout(loop,speed)};        }    };m_out(); } </script> <div   class="iwvjtn8m0"   id="tt">     <a href="#i1">a1</a>     <a href="#i2">a2</a>     <a href="#i3">a3</a> </div> <div   class="iwvjtn8m0"   id="ct">     <div   class="iwvjtn8m0"   id="i1">         <img src="http://case.blueidea.com/files/2008/01/31/work_219030_4249_20080131_092244_3681946_t.png" alt="作品4249" />         <a  target="_blank">作品4249</a>     </div>     <div   class="iwvjtn8m0"   id="i2">         <img src="http://case.blueidea.com/files/2008/01/30/work_185979_4240_20080130_144901_6762390_t.jpg" alt="作品4240" />         <a  target="_blank">作品4240</a>     </div>     <div   class="iwvjtn8m0"   id="i3">         <img src="http://case.blueidea.com/files/2008/01/30/work_365161_4245_20080130_202513_1560669_t.jpg" alt="作品4245" />         <a  target="_blank">作品4245</a>     </div> </div> <script type="text/javascript">  </script> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

上一篇：js實現(xiàn)form自動完成功能

下一篇：ImageFlow可鼠標控制圖片滾動