js实现简单选项卡与自动切换效果的方法


Posted in Javascript onApril 10, 2015

本文实例讲述了js实现简单选项卡与自动切换效果的方法。分享给大家供大家参考。具体分析如下:

这里再上篇《js实现简单的可切换选项卡效果》基础上,进一步实现可以自动切换的切换效果,用这种效果就可以做简单的焦点图了。

说明:

设置一个标识数字置为0,写一个每过几秒标识+1,执行切换效果的函数,然后执行。
当标识超过当前选项卡长度让标识置为0。
在鼠标移到选项卡的时候关闭定时器,鼠标移走的时候打开定时器。

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body,ul,li{
margin:0;
padding:0;
font:12px/1.5 arial;
}
ul,li{
list-style:none;
}
.wrap{
width:500px;
margin:20px auto;
}
.hide{
display:none;
}
#tab_t{
height:25px;
border-bottom:1px solid #ccc;
}
#tab_t li{
float:left;
width:80px;
height:24px;
line-height:24px;
margin:0 4px;
text-align:center;
border:1px solid #ccc;
border-bottom:none;
background:#f5f5f5;
cursor:pointer
}
#tab_t .act{
position:relative;
height:25px;
margin-bottom:-1px;
background:#fff;
}
#tab_c{
border:1px solid #ccc;
border-top:none;
padding:20px;
}
</style>
<script>
window.onload = function(){
 tab("tab_t","li","tab_c","div","onmouseover")
 function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){
  var tab_t = document.getElementById(tab_t);
  var tab_t_li = tab_t.getElementsByTagName(tab_t_tag);
  var tab_c = document.getElementById(tab_c);
  var tab_c_li = tab_c.getElementsByTagName(tag_c_tag);
  var len = tab_t_li.length;
  var i=0;
  var timer = null;
  var num=0;
   for(i=0; i<len; i++){
    tab_t_li[i].index = i;
    tab_t_li[i][evt] = function(){
     clearInterval(timer);
     num = this.index;
     tab_change()
    }
    tab_t_li[i].onmouseout = function(){
     autoplay();
    }
   }
  function tab_change(){
   for(i=0; i<len; i++){
    tab_t_li[i].className = '';
    tab_c_li[i].className = 'hide';
   }
   tab_t_li[num].className = 'act';
   tab_c_li[num].className = '';
  }
  function autoplay(){
   timer = setInterval(function(){
    num++;
    if(num>=len) num=0;
    tab_change();
   },1000);
  }
  autoplay();
 }
}
</script>
</head>
<body>
<div class="wrap">
 <ul id="tab_t">
 <li class="act">选择1</li>
 <li>选择2</li>
 <li>选择3</li>
 <li>选择4</li>
 </ul>
 <div id="tab_c">
 <div>内容1</div>
 <div class="hide">内容2</div>
 <div class="hide">内容3</div>
 <div class="hide">内容4</div>
 </div>
</div> 
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery创建插件的代码分析
Apr 14 Javascript
jQuery 源码分析笔记(6) jQuery.data
Jun 08 Javascript
JavaScript事件委托技术实例分析
Feb 06 Javascript
Jquery使用val方法读写value值
May 18 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
Vue.js学习之过滤器详解
Jan 22 Javascript
vue实现点击图片放大效果
Aug 15 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 Javascript
js实现星星打分效果的方法
Jul 05 #Javascript
js实现简单的可切换选项卡效果
Apr 10 #Javascript
js使用DOM操作实现简单留言板的方法
Apr 10 #Javascript
js实现简单鼠标跟随效果的方法
Apr 10 #Javascript
js实现交换运动效果的方法
Apr 10 #Javascript
js实现简单的左右两边固定广告效果实例
Apr 10 #Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 #Javascript
You might like
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
php 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
PHP面试题之文件目录操作
2015/10/15 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
PHP的反射机制实例详解
2017/03/29 PHP
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
jQuery实现简洁的导航菜单效果
2015/11/23 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
jquery实现左右滑动式轮播图
2017/03/02 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
JavaScript学习笔记之惰性函数示例详解
2017/08/27 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
flask框架视图函数用法示例
2018/07/19 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
体育老师的教学自我评价分享
2013/11/19 职场文书
经贸日语专业个人求职信范文
2014/04/29 职场文书
挂职学习心得体会
2014/09/09 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
单位计划生育责任书
2015/05/09 职场文书
长征观后感
2015/06/09 职场文书
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS