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


Posted in Javascript onOctober 13, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<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 相关文章推荐
Jquery事件的连接使用示例
Jun 18 Javascript
Javascript中的方法链(Method Chaining)介绍
Mar 15 Javascript
jquery判断当前浏览器的实现代码
Nov 07 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
vue 实现 rem 布局或vw 布局的方法
Nov 13 Javascript
JavaScript实现轮播图片完整代码
Mar 07 Javascript
webpack安装配置与常见使用过程详解(结合vue)
Jun 01 Javascript
video.js添加自定义组件的方法
Dec 09 Javascript
vue 递归组件的简单使用示例
Jan 14 Vue.js
JavaScript canvas实现跟随鼠标移动小球
Feb 09 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 #Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 #Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 #Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 #Javascript
编写高性能Javascript代码的N条建议
Oct 12 #Javascript
JavaScript 性能优化小结
Oct 12 #Javascript
一个php+js实时显示时间问题
Oct 12 #Javascript
You might like
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
php中处理模拟rewrite 效果
2006/12/09 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
载入进度条 效果
2006/07/08 Javascript
永不消失的title提示代码
2007/02/15 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
使用Python的turtle模块画图的方法
2017/11/15 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
医学护理毕业生自荐信
2013/11/07 职场文书
经济与贸易专业应届生求职信
2013/11/19 职场文书
精神文明建设先进工作者事迹材料
2014/05/02 职场文书
校园元旦活动总结
2014/07/09 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
高校教师个人总结
2015/02/10 职场文书