信鸽网

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

  作者：bea

本文实例讲述了JS实现自动定时切换的简洁网页选项卡效果。分享给大家供大家参考。具体如下： 这是一款简洁人网页选项卡，与其它TAB不同的是，本选项卡是自动切换的，在变量里设定选项卡的内容、切换时间等，它就开始工作了，如果可以响应鼠标的动作就更完美了。 运行效果截图如下： 在线演示地址如下： http://demo./js/2015/js-auto-ds-web-menu-demo/ 具体代码如下： <html><head><title>

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


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


运行效果截图如下：



在线演示地址如下：


http://demo./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程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: