资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
可以自动轮换的页签 tabs with auto play fucntion
<!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> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%3C!--%20%0D%0Awindow.onload%20%3D%20function()%7B%20%0D%0Afunction%20timertab(t%2Ca)%7B%20%2F%2Ft%E4%B8%BA%E8%A6%81%E5%BA%94%E7%94%A8%E6%AD%A4%E5%87%BD%E6%95%B0%E7%9A%84tab%E7%9A%84id%EF%BC%8Ca%E5%88%9D%E5%A7%8B%E5%8C%96%E6%97%B6%E6%98%BE%E7%A4%BA%E7%9A%84%E9%A1%B9%E7%9B%AE%E7%9A%84%E9%A1%BA%E5%BA%8F%E6%95%B0%20%0D%0A%20%20%20%20this.obj%20%3D%20document.getElementById(t).getElementsByTagName(%22dt%22)%3B%2F%2F%E5%AF%BC%E8%88%AA%20%0D%0A%20%20%20%20this.eles%20%3D%20document.getElementById(t).getElementsByTagName(%22dd%22)%3B%2F%2F%E5%86%85%E5%AE%B9%20%0D%0A%20%20%20%20this.start%20%3D%20a-1%3B%2F%2F%E5%88%9D%E5%A7%8B%E9%A1%B9%E7%9B%AE%20%0D%0A%20%20%20%20this.speed%20%3D%202000%3B%2F%2F%E5%88%87%E6%8D%A2%E9%97%B4%E9%9A%94%20%0D%0A%20%20%20%20this.setid%20%3D%20null%3B%2F%2F%E5%AE%9A%E6%97%B6%E5%99%A8%20%0D%0A%20%20%20%20var%20loop%20%3D%20function()%7B%20%2F%2F%E8%87%AA%E5%8A%A8%E5%88%87%E6%8D%A2%20%0D%0A%20%20%20%20%20%20%20%20for(var%20i%3D0%2Cj%3Dobj.length%3Bi%3Cj%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20obj%5Bi%5D.className%20%3D%20%22%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20eles%5Bi%5D.className%20%3D%20%22%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20obj%5Bstart%5D.className%20%3D%20%22on%22%3B%20%0D%0A%20%20%20%20%20%20%20%20eles%5Bstart%5D.className%20%3D%20%22on%22%3B%20%0D%0A%20%20%20%20%20%20%20%20setid%3DsetTimeout(loop%2Cspeed)%3B%20%0D%0A%20%20%20%20%20%20%20%20start%2B%2B%3B%20%0D%0A%20%20%20%20%20%20%20%20if(start%3D%3Dobj.length)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20start%3D0%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2FclearTimeout(setid)%3B%2F%2F%E5%8F%AA%E5%BE%AA%E7%8E%AF%E4%B8%80%E6%AC%A1%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%3Bloop()%3B%20%0D%0A%20%20%20%20var%20clik%20%3D%20function()%7B%20%2F%2F%E7%82%B9%E5%87%BB%20%0D%0A%20%20%20%20%20%20%20%20for(var%20i%3D0%3Bi%3Cobj.length%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20obj%5Bi%5D.onclick%20%3D%20function()%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20clearTimeout(setid)%3B%2F%2F%E5%81%9C%E6%AD%A2%E5%8E%9F%E6%9D%A5%E7%9A%84%E8%87%AA%E5%8A%A8%E5%88%87%E6%8D%A2%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20inb%20%3D%20this.id.substr(this.id.indexOf(%22%23%22)%2B6%2C1)%3B%2F%2F%E8%BF%99%E9%87%8C%E7%9A%84%E6%95%B0%E5%AD%976%E4%B8%BAdt%E7%9A%84id%E4%B8%AD%E6%95%B0%E5%AD%97%E5%BA%8F%E5%8F%B7%E5%87%BA%E7%8E%B0%E7%9A%84%E4%BD%8D%E7%BD%AE%E6%95%B0%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20for(var%20i%3D0%2Cj%3Dobj.length%3Bi%3Cj%3Bi%2B%2B)%7B%2F%2F%E9%87%8D%E6%96%B0%E5%88%9D%E5%A7%8B%E5%8C%96%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20obj%5Bi%5D.className%20%3D%20%22%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20eles%5Bi%5D.className%20%3D%20%22%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.className%20%3D%20%22on%22%3B%2F%2F%E6%98%BE%E7%A4%BA%E7%82%B9%E5%87%BB%E9%A1%B9%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20eles%5Binb-1%5D.className%20%3D%20%22on%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20start%3Dinb-1%3B%2F%2F%E4%BB%8E%E8%BF%99%E9%87%8C%E5%BC%80%E5%A7%8B%E7%BB%A7%E7%BB%AD%E5%BE%AA%E7%8E%AF%EF%BC%88%E5%8F%AF%E4%BB%A5%E6%A0%B9%E6%8D%AE%E8%A6%81%E6%B1%82%E9%80%89%E6%8B%A9%E6%98%AF%E5%90%A6%E5%8E%BB%E6%8E%89%E8%BF%99%E9%83%A8%E5%88%86%EF%BC%89%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20loop()%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20false%20%2F%2F%E5%8F%96%E6%B6%88%3Ca%20href%3D%22%23tabs_01%22%3E%E9%BB%98%E8%AE%A4%E4%BA%8B%E4%BB%B6%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%3Bclik()%3B%20%0D%0A%7D%20%0D%0Atimertab(%22tab_01%22%2C2)%3B%20%0D%0A%7D%20%0D%0A%2F%2F--%3E%20%0D%0A%3C%2Fscript%3E"> </head> <body> <dl id="tab_01" class="tab"> <dt id="tab_01"><a href="#tabs_01" _ewebeditor_ta_href="%23tabs_01">tab_01</a></dt> <dt id="tab_02"><a href="#tabs_02" _ewebeditor_ta_href="%23tabs_02">tab_02</a></dt> <dt id="tab_03"><a href="#tabs_03" _ewebeditor_ta_href="%23tabs_03">tab_03</a></dt> <dd id="tabs_01"><img src="1.jpg" _ewebeditor_ta_src="1.jpg" alt="1.jpg" /><a href="#" _ewebeditor_ta_href="%23">link1</a></dd> <dd id="tabs_02"><img src="2.jpg" _ewebeditor_ta_src="2.jpg" alt="2.jpg" /><a href="#" _ewebeditor_ta_href="%23">link2</a></dd> <dd id="tabs_03"><img src="3.jpg" _ewebeditor_ta_src="3.jpg" alt="3.jpg" /><a href="#" _ewebeditor_ta_href="%23">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> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0A%2F*%E5%8F%82%E6%95%B0%E8%AF%B4%E6%98%8E%EF%BC%9A%20%0D%0At%EF%BC%9A%E5%AF%BC%E8%88%AA%E5%AE%B9%E5%99%A8%E7%9A%84ID%20%0D%0Ato%EF%BC%9A%E5%AF%BC%E8%88%AA%E7%9A%84%E5%8D%95%E4%BD%8D%E5%85%83%E7%B4%A0%E6%A0%87%E7%AD%BE%20%0D%0Ac%EF%BC%9A%E5%86%85%E5%AE%B9%E7%9A%84%E5%AE%B9%E5%99%A8ID%20%0D%0Aco%EF%BC%9A%E5%86%85%E5%AE%B9%E7%9A%84%E5%8D%95%E4%BD%8D%E5%85%83%E7%B4%A0%E6%A0%87%E7%AD%BE%20%0D%0As%EF%BC%9A%E5%88%9D%E5%A7%8B%E5%8C%96%E6%97%B6%E7%9A%84%E5%BD%93%E5%89%8D%E9%A1%B9%20%0D%0Aa%EF%BC%9A%E5%86%85%E5%AE%B9%E7%9A%84%E5%8D%95%E4%BD%8D%E5%85%83%E7%B4%A0%E6%A0%87%E7%AD%BEID%E4%B8%AD%E7%9A%84%E6%95%B0%E5%AD%97%E5%BA%8F%E5%8F%B7%E7%9A%84%E4%BD%8D%E7%BD%AE%3Cdiv%20id%3D%22i1%22%3E(%E5%AF%B9%E5%BA%94%E7%9A%84a%E4%B8%BA2)%20%0D%0A*%2F%20%0D%0Afunction%20timertab(t%2Cto%2Cc%2Cco%2Cs%2Ca)%7B%20%0D%0A%20%20%20this.obj%20%3D%20document.getElementById(t).getElementsByTagName(to)%3B%2F%2F%E5%AF%BC%E8%88%AA%E5%AF%B9%E8%B1%A1%20%0D%0A%20%20%20this.eles%20%3D%20document.getElementById(c).getElementsByTagName(co)%3B%2F%2F%E5%86%85%E5%AE%B9%E9%A1%B9%20%0D%0A%20%20%20this.start%20%3D%20s-1%3B%2F%2F%E5%88%9D%E5%A7%8B%E9%A1%B9%E7%9B%AE%20%0D%0A%20%20%20this.speed%20%3D%202000%3B%2F%2F%E5%88%87%E6%8D%A2%E9%97%B4%E9%9A%94%20%0D%0A%20%20%20this.setid%20%3D%20null%3B%2F%2F%E5%AE%9A%E6%97%B6%E5%99%A8%20%0D%0A%20%20%20var%20loop%20%3D%20function()%7B%20%2F%2F%E8%87%AA%E5%8A%A8%E5%88%87%E6%8D%A2%20%0D%0A%20%20%20%20%20%20%20for(var%20i%3D0%2Cj%3Dobj.length%3Bi%3Cj%3Bi%2B%2B)%7B%2F%2F%E5%88%9D%E5%A7%8B%E5%8C%96%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20obj%5Bi%5D.className%20%3D%20%22%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20eles%5Bi%5D.className%20%3D%20%22%22%3B%20%0D%0A%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20obj%5Bstart%5D.className%20%3D%20%22on%22%3B%2F%2F%E5%BD%93%E5%89%8D%E9%A1%B9%20%0D%0A%20%20%20%20%20%20%20eles%5Bstart%5D.className%20%3D%20%22on%22%3B%20%0D%0A%20%20%20%20%20%20%20setid%3DsetTimeout(loop%2Cspeed)%3B%2F%2F%E5%BC%80%E5%A7%8B%E8%87%AA%E5%8A%A8%E5%88%87%E6%8D%A2%20%0D%0A%20%20%20%20%20%20%20start%2B%2B%3B%20%0D%0A%20%20%20%20%20%20%20if(start%3D%3Dobj.length)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20start%3D0%3B%20%0D%0A%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%7D%3Bloop()%3B%20%0D%0A%20%20%20var%20clik%20%3D%20function()%7B%20%2F%2F%E7%82%B9%E5%87%BB%20%0D%0A%20%20%20%20%20%20%20for(var%20i%3D0%3Bi%3Cobj.length%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20obj%5Bi%5D.onclick%20%3D%20function()%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20clearTimeout(setid)%3B%2F%2F%E5%81%9C%E6%AD%A2%E5%8E%9F%E6%9D%A5%E7%9A%84%E8%87%AA%E5%8A%A8%E5%88%87%E6%8D%A2%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20inb%20%3D%20this.href.substr(this.href.indexOf(%22%23%22)%2Ba%2C1)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20for(var%20i%3D0%2Cj%3Dobj.length%3Bi%3Cj%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20obj%5Bi%5D.className%20%3D%20%22%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20eles%5Bi%5D.className%20%3D%20%22%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.className%20%3D%20%22on%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20eles%5Binb-1%5D.className%20%3D%20%22on%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F*%E4%BB%8E%E7%82%B9%E5%87%BB%E9%A1%B9%E5%BC%80%E5%A7%8B%E8%87%AA%E5%8A%A8%E5%88%87%E6%8D%A2%EF%BC%8C%E6%AD%A4%E5%8A%9F%E8%83%BD%E5%8F%AF%E4%BB%A5%E9%80%89%E6%8B%A9%E5%8E%BB%E6%8E%89*%2F%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20start%3Dinb-1%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20loop()%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%7D%3Bclik()%3B%20%0D%0A%20%20%20var%20m_over%20%3D%20function()%7B%2F%2F%E9%BC%A0%E6%A0%87%E6%8C%87%E5%90%91%E6%9A%82%E5%81%9C%E8%87%AA%E5%8A%A8%E5%88%87%E6%8D%A2%20%0D%0A%20%20%20%20%20%20%20for(var%20i%3D0%3Bi%3Cobj.length%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20eles%5Bi%5D.onmouseover%20%3D%20function()%7BclearTimeout(setid)%7D%3B%20%0D%0A%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%7D%3Bm_over()%3B%20%0D%0A%20%20%20var%20m_out%20%3D%20function()%7B%2F%2F%E9%BC%A0%E6%A0%87%E7%A6%BB%E5%BC%80%E7%BB%A7%E7%BB%AD%E8%87%AA%E5%8A%A8%E5%88%87%E6%8D%A2%20%0D%0A%20%20%20%20%20%20%20for(var%20i%3D0%3Bi%3Cobj.length%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20eles%5Bi%5D.onmouseout%20%3D%20function()%7Bsetid%3DsetTimeout(loop%2Cspeed)%7D%3B%20%0D%0A%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%7D%3Bm_out()%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> <div id="tt"> <a href="#i1" _ewebeditor_ta_href="%23i1">a1</a> <a href="#i2" _ewebeditor_ta_href="%23i2">a2</a> <a href="#i3" _ewebeditor_ta_href="%23i3">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" _ewebeditor_ta_src="http%3A%2F%2Fcase.blueidea.com%2Ffiles%2F2008%2F01%2F31%2Fwork_219030_4249_20080131_092244_3681946_t.png" alt="作品4249" /> <a href="http://case.blueidea.com/works/view/4249/" _ewebeditor_ta_href="http%3A%2F%2Fcase.blueidea.com%2Fworks%2Fview%2F4249%2F" 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" _ewebeditor_ta_src="http%3A%2F%2Fcase.blueidea.com%2Ffiles%2F2008%2F01%2F30%2Fwork_185979_4240_20080130_144901_6762390_t.jpg" alt="作品4240" /> <a href="http://case.blueidea.com/works/view/4240/" _ewebeditor_ta_href="http%3A%2F%2Fcase.blueidea.com%2Fworks%2Fview%2F4240%2F" 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" _ewebeditor_ta_src="http%3A%2F%2Fcase.blueidea.com%2Ffiles%2F2008%2F01%2F30%2Fwork_365161_4245_20080130_202513_1560669_t.jpg" alt="作品4245" /> <a href="http://case.blueidea.com/works/view/4245/" _ewebeditor_ta_href="http%3A%2F%2Fcase.blueidea.com%2Fworks%2Fview%2F4245%2F" target="_blank">作品4245</a> </div> </div> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%3C!--%20%0D%0A%20%20%20%20timertab(%22tt%22%2C%22a%22%2C%22ct%22%2C%22div%22%2C2%2C2)%3B%20%0D%0A%2F%2F--%3E%20%0D%0A%3C%2Fscript%3E"> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程