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 基础问答三
Dec 03 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
BootStrap的JS插件之轮播效果案例详解
May 16 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
vue组件初学_弹射小球(实例讲解)
Sep 06 Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 Javascript
vue-router 控制路由权限的实现
Sep 24 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
常见的PHP五种设计模式小结
2011/03/23 PHP
简单的PHP多图上传小程序代码
2011/07/17 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Windows下python2.7.8安装图文教程
2016/05/26 Python
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
python列表推导式操作解析
2019/11/26 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
详解python对象之间的交互
2020/09/29 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
美国轮胎网站:Priority Tire
2018/11/28 全球购物
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
英国办公家具网站:Furniture At Work
2019/10/07 全球购物
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
质检员岗位职责
2013/12/17 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
python实现MD5进行文件去重的示例代码
2021/07/09 Python
python游戏开发Pygame框架
2022/04/22 Python