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

2019-11-20 11:28:21

字体：大中小

来源：转载

供稿：网友

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.VeVB.COm/js/2015/js-auto-ds-web-menu-demo/

具体代码如下：

<html><head><title>自动切换的选项卡</title><style>.tab{width:100px;height:25px;background-color:#ccc;margin:0;padding:0;border-right:1px solid #666;}.tab_on{width:100px;height:25px;background-color:#eee;margin:0;padding:0;border-bottom:1px solid #666;border-top:1px solid #666;border-left:1px solid #666;}#show{width:200px;height:100px;background-color:#eee;border-bottom:1px solid #666;border-top:1px solid #666;border-right:1px solid #666;line-height:30px;}</style><script language="javascript" type="text/javascript"><!--var n=1;var time=1000;var strArr=new Array();strArr[0]="我们提供";strArr[1]="高质量脚本下载";strArr[2]="欢迎光临小站";strArr[3]="精品网页特效";function init(){document.getElementById("show").innerHTML = strArr[0];}function show(){ n=n>strArr.length?1:n;//如果n>数组长度 则重新赋值为1，以便程序循环 for(i=1;i<(strArr.length+1);i++){//这里for用来改变当前tab的classname if(i==n) document.getElementById("tab_"+i).className = "tab_on"; else document.getElementById("tab_"+i).className = "tab"; } document.getElementById("show").innerHTML = strArr[n-1];//现实数据 n++;} setInterval("show()",time);//隔一秒执行一次//--></script></head><body onload="init()"><table border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#eeeeee"> <tr>  <td align="right">  <div id="tab_1" class="tab_on">ASP</div>  <div id="tab_2" class="tab" >PHP</div>  <div id="tab_3" class="tab" >JSP</div>  <div id="tab_4" class="tab">JAVA</div>  </td>  <td bgcolor="#eeeeee">  <div id="show"></div>  </td> </tr></table></body></html>

希望本文所述对大家的JavaScript程序设计有所帮助。

上一篇：JS实现左右拖动改变内容显示区域大小的方法

下一篇：JS+CSS实现仿雅虎另类滑动门切换效果