JS实现自动定时切换的简洁网页选项卡效果

本文实例讲述了射流研究…实现自动定时切换的简洁网页选项卡效果。分享给大家供大家参考。具体如下：

这是一款简洁人网页选项卡，与其它拉环不同的是，本选项卡是自动切换的，在变量里设定选项卡的内容、切换时间等，它就开始工作了，如果可以响应鼠标的动作就更完美了。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-auto-ds-web-menu-demo/

具体代码如下：

htmlheadtitle自动切换的选项卡/title样式。tab { width :100 px高度：25px背景色： # CCC余量：0划水：0;右边框：1px实心# 666;}.tab _ on { width :100 pxh three :25 px背景色： # eee余量：0划水：0;边框-底部：1px实心# 666;边框-top:1px实心# 666;边框-左侧：1px实心# 666;} # show { width:200px高度：100 px背景色： # eee边框-底部：1px实心# 666;边框-top:1px实心# 666;右边框：1px实心# 666;线高：30 px}/stylescript语言=' JavaScript '类型=' text/JavaScript '！-var n=1；变化时间=1000;var strArr=new Array()；' strArr[0]='我们提供；' strArr[1]='高质量脚本下载；' strArr[2]='欢迎光临小站；' strArr[3]='精品网页特效；函数init(){文档。getelementbyid(' show ').innerHTML=StrArr[0]；}函数show(){ n=nstarr。长度？1:n/如果n数组长度则重新赋值为1,以便程序循环for(I=1；我(斯特拉。长度1)；i ){//这里为用来改变当前标签的类名称if(I==n)文档。getelementbyid(' tab _ I ').className=' tab _ onelse文档。getelementbyid(' tab _ I ').document.getElementById('show ').innerHTML=StrArr[n-1]；//现实数据n；} setInterval('show()'，time)；//隔一秒执行一次/////加载时的脚本/头体=' init()'表格边框=' 0 ' align=' center '单元格填充=' 0 '单元格间距=' 0 ' bgcolor=' # eeee ' tr TD align=' right ' div id=' tab _ 1 ' class=' tab _ on ' ASP/div id=' tab _ 2 ' class=' tab ' PHP/div id=' tab _ 3 ' class=' tab ' JSP/div id=' tab _ 4 ' class=' tab ' Java/div/TD bgcolor希望本文所述对大家的Java脚本语言程序设计有所帮助。