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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐base.js
Dec 23 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
EasyUi datagrid 实现表格分页
Feb 10 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
javascript判断网页是关闭还是刷新
Sep 12 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
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基础学习小结
2011/04/17 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
js+css实现导航效果实例
2015/02/10 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
Angular中$compile源码分析
2016/01/28 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
python的移位操作实现详解
2019/08/21 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
介绍一下Java中的Class类
2015/04/10 面试题
小学生暑假家长评语
2014/04/17 职场文书
班组拓展活动方案
2014/08/14 职场文书
快递员岗位职责
2014/09/12 职场文书
九寨沟导游词
2015/02/02 职场文书
幼师小班个人总结
2015/02/12 职场文书
廉洁自律证明
2015/06/24 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers