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 文件本身编码转换 图文教程
Oct 12 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 Javascript
jQuery实现表格展开与折叠的方法
May 04 Javascript
Jquery 效果使用详解
Nov 23 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
May 03 Javascript
手把手教你vue-cli单页到多页应用的方法
May 31 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 Javascript
vue+springboot实现登录验证码
May 27 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模拟post上传图片实现代码
2016/06/24 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
JS request函数 用来获取url参数
2010/05/17 Javascript
jquery photoFrame 图片边框美化显示插件
2010/06/28 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
JSONP基础知识详解
2017/03/19 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
Python中除法使用的注意事项
2014/08/21 Python
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
Python批量修改文本文件内容的方法
2016/04/29 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
python利用7z批量解压rar的实现
2019/08/07 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
python实现局域网内实时通信代码
2019/12/22 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
C语言面试题
2013/05/19 面试题
有关打架的检讨书
2014/01/25 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
求职自荐信怎么写
2015/03/04 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
研究生简历自我评
2015/03/11 职场文书
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android