可以自动轮换的页签 tabs with auto play fucntion

ttx9n · 发表于 2008-2-2 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"> 
 
</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="https://www.jb51.net/article/1.jpg" /><a href="#">link1</a></dd> 
    <dd id="tabs_02"><img src="https://www.jb51.net/article/2.jpg" alt="https://www.jb51.net/article/2.jpg" /><a href="#">link2</a></dd> 
    <dd id="tabs_03"><img src="https://www.jb51.net/article/3.jpg" alt="https://www.jb51.net/article/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"> 
 
</style> 
</head> 
<body> 
<script> 
/*参数说明： 
t：导航容器的ID 
to：导航的单位元素标签 
c：内容的容器ID 
co：内容的单位元素标签 
s：初始化时的当前项 
a：内容的单位元素标签ID中的数字序号的位置(对应的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> 
 
    <a href="#i1">a1</a> 
    <a href="#i2">a2</a> 
    <a href="#i3">a3</a> 
 
 
     
        <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> 
     
     
        <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> 
     
     
        <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> 
     
 
<script type="text/javascript"> 
 
</script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

qwe520 · 发表于 2022-12-11 06:56:26

啦啦啦啦啦德玛西亚

0vwrdf6 · 发表于 2023-1-15 19:09:51

终于找到了，我擦

回复用户1 · 发表于 2023-10-31 01:12:46

8888888888888888

lba36h7g · 发表于 2023-11-3 04:21:58

还可以不错

plvo189 · 发表于 2023-11-27 10:45:47

那三门，你们谁寂寞才快乐撒

leidie123a · 发表于 2024-3-2 07:15:02

哈哈哈哈哈哈哈

fzyzy · 发表于 2024-3-14 14:31:06

源码源码源码源码源码源码源码源码源码源码源码源码源码

pwseqn1h · 发表于 2024-3-26 05:57:16

人都不在了啊啊

回复用户1 · 发表于 2024-4-26 06:25:28

天天源码论坛

账号		自动登录	找回密码
密码			立即注册

[JavaScript] 可以自动轮换的页签 tabs with auto play fucntion

相关帖子