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 相关文章推荐
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
Jquery AJAX 框架的使用方法
Nov 03 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
JavaScript中的property和attribute介绍
Dec 26 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
javascript冒泡排序小结
Apr 10 Javascript
KnockoutJs快速入门教程
May 16 Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
vue实现简单的登录弹出框
Oct 26 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在线生成ico文件的代码
2007/10/09 PHP
一贴学会PHP 新手入门教程
2009/08/03 PHP
PHP中include()与require()的区别说明
2010/03/10 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
php实现的CSS更新类实例
2014/09/22 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
HTML的select控件美化
2017/03/27 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
2018/09/14 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
JS实现简易贪吃蛇游戏
2020/08/24 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
数学检讨书1000字
2014/02/24 职场文书
大学三年计划书范文
2014/04/30 职场文书
房产公证委托书范本
2014/09/20 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
学生会工作感言
2015/08/07 职场文书
react中的DOM操作实现
2021/06/30 Javascript
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript