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 06 Javascript
JS字符串函数扩展代码
Sep 13 Javascript
js解析与序列化json数据(三)json的解析探讨
Feb 01 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 Javascript
Javascript基础教程之变量
Jan 18 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
JQuery radio(单选按钮)操作方法汇总
Apr 15 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
vue vant Area组件使用详解
Dec 09 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 多维数组排序(usort,uasort)
2010/06/30 PHP
php jquery 多文件上传简单实例
2013/12/23 PHP
PHP批量生成静态HTML的简单原理和方法
2014/04/20 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
jquery实现居中弹出层代码
2010/08/25 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
JavaScript中的console.log()函数详细介绍
2014/12/29 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python学习之面向对象【入门初级篇】
2017/01/21 Python
python实现画圆功能
2018/01/25 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
Python中安装easy_install的方法
2018/11/18 Python
python实现事件驱动
2018/11/21 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
Python socket服务常用操作代码实例
2020/06/22 Python
python3的pip路径在哪
2020/06/23 Python
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
分布式数据库需要考虑哪些问题
2013/12/08 面试题
数据库的约束含义
2012/09/09 面试题
高中毕业生自我鉴定范文
2013/09/26 职场文书
大学生作弊检讨书
2014/02/19 职场文书
学徒工职责
2014/03/06 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
邀请函格式范文
2015/02/02 职场文书
Java线程的6种状态与生命周期
2022/05/11 Java/Android