脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS自动定时切换的简洁网页选项卡

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

 更新时间：2015年10月13日 11:06:24   作者：企鹅  
这篇文章主要介绍了JS实现自动定时切换的简洁网页选项卡效果,涉及JavaScript基于时间函数定时触发遍历函数实现定时切换功能,需要的朋友可以参考下

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

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

运行效果截图如下：

在线演示地址如下：

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

您可能感兴趣的文章:

相关文章

  • JavaScript 判断浏览器是否支持SVG的代码

    JavaScript 判断浏览器是否支持SVG的代码

    SVG(可缩放矢量图形)，接下来将介绍下如何判断浏览器是否支持SVG,感兴趣的朋友可以参考下哈，希望本代码对你有所帮助
    2013-03-03
  • javascript函数的四种调用模式

    javascript函数的四种调用模式

    本文详细介绍了javascript函数的四种调用模式。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • webapi根据id获取元素的实现思路

    webapi根据id获取元素的实现思路

    掌握document.getElementById() 根据id获取元素,在页面画出一个宽200 高200 粉色的盒子, 在控制台打印这个盒子,接到这样的需求如何处理呢,下面小编给大家分享webapi根据id获取元素的实现思路,感兴趣的朋友一起看看吧
    2024-02-02
  • JavaScript类型检测之typeof 和 instanceof 的缺陷与优化

    JavaScript类型检测之typeof 和 instanceof 的缺陷与优化

    在javascript中，typeof 和 instanceof 是用来判断数据类型比较通用的两个方法，这篇文章的目的是通过对这两个方法介绍来分析其存在的不足并提出优化方案
    2016-01-01
  • JavaScript 如何在线解压 ZIP 文件

    JavaScript 如何在线解压 ZIP 文件

    本文将介绍浏览器解压和服务器解压两种在线解压ZIP文件的方案。帮助大家用JavaScript实现在线解压，感兴趣的朋友可以参考下
    2021-05-05
  • JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)

    JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)

    使用javascript来写复制到剪贴板的代码，一般都是浏览器不兼容的。所以采用flash的方式，模拟一个层，再来复制，就可以做到全部浏览器都适用，具体实现如下，感兴趣的朋友可以参考下哈
    2013-05-05
  • 封装了一个js图片轮换效果的函数

    封装了一个js图片轮换效果的函数

    图片轮换的效果随处可见，但是我还是试着封装了一个函数。一个页面上可以多次调用。。。由于初学代码写的不是多好，其中有个文件是可以踢出到一个js文件里的，这是为了测试方便，我都给放在了一个页面里了。
    2011-09-09
  • JS requestVideoFrameCallback() 简单案例

    JS requestVideoFrameCallback() 简单案例

    这篇文章主要介绍了JS requestVideoFrameCallback()简单案例，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下
    2022-07-07
  • js判断浏览器的环境（pc端，移动端，还是微信浏览器）

    js判断浏览器的环境（pc端，移动端，还是微信浏览器）

    这篇文章主要介绍了js判断浏览器的环境（pc端，移动端，还是微信浏览器），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • js 提交form表单和设置form表单请求路径的实现方法

    js 提交form表单和设置form表单请求路径的实现方法

    下面小编就为大家带来一篇js 提交form表单和设置form表单请求路径的实现方法。
    2016-10-10

最新评论