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 相关文章推荐
JavaScript 开发中规范性的一点感想
Jun 23 Javascript
jquery 最简单易用的表单验证插件
Feb 27 Javascript
jquery js 重置表单 reset()具体实现代码
Aug 05 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
Oct 20 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
jQuery Dialog 取消右上角删除按钮事件
Sep 07 Javascript
jQuery焦点图轮播效果实现方法
Dec 19 Javascript
vue使用video.js进行视频播放功能
Jul 18 Javascript
vue addRoutes路由动态加载操作
Aug 04 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 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
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
PHP实现验证码校验功能
2017/11/16 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
php实现图片压缩处理
2020/09/09 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
Node.js创建Web、TCP服务器
2017/12/05 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
详解Python中with语句的用法
2015/04/15 Python
详细解析Python中的变量的数据类型
2015/05/13 Python
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
浅谈python3中input输入的使用
2019/08/02 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
施工班组长岗位职责
2014/01/05 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
大学生个人求职信
2014/06/02 职场文书
物理分数没达标检讨书
2014/09/13 职场文书
超市开店计划书
2014/09/15 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
党员民主评议自我评价
2014/10/20 职场文书
物业工程部岗位职责
2015/02/11 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
大学生暑期实践报告
2015/07/13 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang