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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 可以自动轮换的页签 tabs with auto play fucntion

Javascript: 图片放大镜效果代码; 超棒的javascript页面顶部卷动广告效果; javascript 改变网页加载的CSS; javascript实现仿银行密码输入框效果的代码; 麦鸡的TAB切换功能结合了javascript和css; mapper--图片热点区域高亮组件官方站点; undefined==null引发的两者区别与联系; 用cookies实现的可记忆的样式切换效果代码下载; 特漂亮的JS图片排列旋转效果代码; js jquery做的图片连续滚动代码; 利用js跨页面保存变量做菜单的方法; 用javascript做一个webgame连连看大家看下; Javascript 各浏览器的 Javascript 效率对比; 北京奥运官方网站幻灯切换效果flash版打包下载; 纯js无flash仿搜狐女人频道FLASH图片切换效果代码; javascript实现的三维正方体(兼容ie7,ff); 浅谈javascript函数劫持[转自xfocus]; 连续操作HTMLElement对象图文解决方法; Javascript jquery css 写的简单进度条控件; 地址栏上的一段语句，改变页面的风格。（教程）

No. « ‹ 207 208 209 210 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 230 ::

收藏到网摘: n/a

网页代码常用小技巧总结 js判断一点是否在一个三角形内

HTML、CSS方面改写了一下结构，用了一个DL javascript方面可以选择不断自动循环，或者只循环一次的，点击以后继续循环，或者停止循环

点击运行可以看到效果:
[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

点击运行可以看到效果:

<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中的数字序号的位置<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">
</script>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

网页代码常用小技巧总结 js判断一点是否在一个三角形内

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

评论 (0) All

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