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 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
May 23 Javascript
在百度知道团队中快速审批新成员的js脚本
Feb 02 Javascript
JavaScript数值转换的三种方式总结
Jul 31 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
javascript倒计时效果实现
Nov 12 Javascript
AngularJS基础 ng-srcset 指令简单示例
Aug 03 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
JavaScript评论点赞功能的实现方法
Mar 13 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 Javascript
javascript数组includes、reduce的基本使用
Jul 02 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
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
php文件上传的简单实例
2013/10/19 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
jquery操作 iframe的方法
2014/12/03 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
React 实现车牌键盘的示例代码
2019/12/20 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
python计算时间差的方法
2015/05/20 Python
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
PyQt5每天必学之拖放事件
2020/08/27 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
python实现屏保程序(适用于背单词)
2019/07/30 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
Django实现随机图形验证码的示例
2020/10/15 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
平面设计自荐信
2013/10/07 职场文书
主持人开幕词
2015/01/29 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL