分步解析JavaScript实现tab选项卡自动切换功能


Posted in Javascript onJanuary 25, 2016

本文分享一个能够实现自动切换的选项卡功能,并给出它的具体实现过程。

关于选项卡大家一定不会陌生,应用非常的频繁,通常选项卡都是需要点击或者划过才能够实现切换。
代码实例如下:

<html>
<head>
<meta charset=" utf-8">
<title>tab切换</title>
<style type="text/css">
body,h2,p{
 margin:0px;
 padding:0px;
}ul,li{
 margin:0px;
 padding:0px;
 float:left;
 list-style-type:none;
 }
body{font-size:12px;}
.box{
 width:722px;
 height:99px;
 margin:10px auto;
 border:1px solid #dedede;
}
.list{
 width:711px;
 height:22px;
 float:left;
 padding:4px 0 0 9px;
 border-top:1px solid #fff;
 border-left:1px solid #fff;
 border-right:1px solid #fff;
}
.list li{
 width:74px;
 height:22px;
 float:left;
 cursor:pointer;
 color:#656565;
 line-height:22px;
 text-align:center;
}
.list li.hove{
 width:72px;
 height:20px;
 color:#fc6703;
 line-height:20px;
 border-top:1px solid #dedede;
 border-left:1px solid #dedede;
 border-right:1px solid #dedede;
 border-bottom:1px solid #fff;
 background:#fff;
}
.content{
 width:722px;
 height:72px;
 float:left;
 display:none;
}
</style>
<script>
function $(id){
 return typeof id === "string" ? document.getElementById(id) : id;
}
 
function $$(oParent, elem){
 return (oParent || document).getElementsByTagName(elem);
}
 
function $$$(oParent, sClass){
 var aElem = $$(oParent, '*');
 var aClass = [];
 var index = 0;
 for(index=0;index<aElem.length;index++){
 if(aElem[index].className == sClass){
  aClass.push(aElem[index]);
 }
 }
 return aClass;
}
 
function addEvent(oElm, strEvent, fuc) {
 addEventListener?oElm.addEventListener(strEvent,fuc,false):oElm.attachEvent('on'+strEvent,fuc);
};
function Tab(){
 this.initialize.apply(this, arguments);
}
 
 
Object.extend = function(destination, source) {
 for (var property in source) {
 destination[property] = source[property];
 }
 return destination;
};
 
Tab.prototype = {
 initialize : function(obj, dis, content, onEnd, eq){
 this.obj = $(obj);
 this.oList = $$$(this.obj, 'list')[0];
 this.aCont = $$$(this.obj, content);
 this.oUl = $$(this.oList, 'ul')[0];
 this.aLi = this.oUl.children;
 this.timer = null;
 eq ? (this.aLi.length < eq ? eq = 0 : eq) : eq = 0;
 this.oEve(onEnd);
 this.onEnd.method == 'mouseover' ? this.method = "mouseover" : this.method = "click";
 this.onEnd.autoplay == 'stop' ? this.autoplay = "stop" : this.autoplay = "play";
 this.aCont[eq].style.display = 'block';
 this.aLi[eq].className = 'hove';
 this.display(dis);
 this.autoPlayTab(eq, dis);
 },
 oEve: function(onEnd){
 this.onEnd = {
  method: 'mouseover',
  autoplay: 'stop',
 };
 Object.extend(this.onEnd, onEnd || {});
 },
 display : function(dis){
 var _this = this;
 var index = iNow = 0;
 for(index=0;index<_this.aLi.length;index++){
  (function(){
  var j = index;
  addEvent(_this.aLi[j], _this.method,
  function() {
   _this.fnClick(j,dis);
   _this.autoPlayTab(j, dis);
  })
  })()
 }
 },
 autoPlayTab : function(iNow, dis){
 if(this.autoplay == 'play'){
  var _this = this;
  this.iNow = iNow;
  this.obj.onmouseover = function(){
  clearInterval(_this.timer);
  };
  this.obj.onmouseout = function(){
  _this.timer = setInterval(playTab,5000);
  };
  clearInterval(_this.timer);
  _this.timer = setInterval(playTab,5000);
  function playTab(){
  if(_this.iNow == _this.aLi.length)_this.iNow = 0;
  _this.fnClick(_this.iNow, dis)
  _this.iNow++
  }
 }
 },
 fnClick : function(oBtn, dis){
 var index = 0;
 for(index=0;index<this.aLi.length;index++){
  this.aLi[index].className = '';
  this.aCont[index].style.display = 'none';
 }
 this.aLi[oBtn].className = dis;
 this.aCont[oBtn].style.display = 'block';
 }
};
window.onload = function(){
 new Tab("box", 'hove', 'content', {
 method : 'mouseover',
 autoplay : 'play'
 },0);
};
</script>
</head>
<body>
<div id="box" class="box">
 <div class="list">
 <ul>
  <li>div教程</li>
  <li>jquery教程</li>
  <li>css教程</li>
 </ul>
 </div>
 <div class="content">蚂蚁部落欢迎您</div>
 <div class="content">本站url地址是softwhy.com</div>
 <div class="content">只有努力才会有美好的未来</div>
</div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。
(1)模拟实现jQuery中的id选择器,参数是元素的id属性值

function $(id){
return typeof id === "string" ? document.getElementById(id) : id;
}

(2).function $$(oParent, elem){
  return (oParent || document).getElementsByTagName(elem);
},此函数实现了后去指定元素下所有特定元素的对象集合。
(3).此函数的功能是将oParent元素下所有class属性值为sClass的元素存入数组

function $$$(oParent, sClass){
 var aElem = $$(oParent, '*');
 var aClass = [];
 var index = 0;
 for(index=0;index<aElem.length;index++){
  if(aElem[index].className == sClass){
   aClass.push(aElem[index]);
  }
 }
 return aClass;
}

(4)事件处理函数的绑定封装,实现了浏览器兼容功能。

.function addEvent(oElm, strEvent, fuc) {
 addEventListener?oElm.addEventListener(strEvent,fuc,false) : oElm.attachEvent('on'+strEvent,fuc);
}

(5).此方法实现了基本的初始化操作

function Tab(){ this.initialize.apply(this, arguments);
}

(6).实现了合并对象的功能,比如可以将对象a中的属性合并到对象b中

Object.extend = function(destination, source) {
 for (var property in source) {
  destination[property] = source[property];
 }
 return destination;
}

(7).Tab.prototype = {},设置Tab构造函数的原型对象。
(8).initialize : function(obj, dis, content, onEnd, eq){},此方法可以进行一些初始化操作。第一个参数是元素id属性值,第二个参数是class样式类,第三个参数是内容div的class样式类名称,第四个参数是一个对象直接量,里面存储了一些相关参数,第五个参数规定默认哪个选项卡被选中,是一个数字。
(9).this.obj = $(obj),获取指定的元素对象。
(10).this.oList = $$$(this.obj, 'list')[0],获取class属性值为list的标题外层div元素。
(11).this.aCont = $$$(this.obj, content),获取选项卡内容元素集合。
(12).this.oUl = $$(this.oList, 'ul')[0],获取标题ul元素。
(13).this.aLi = this.oUl.children,获取ul元素下的所有子元素。
(14).this.timer = null,用作定时器函数的标识。
(15).eq ? (this.aLi.length < eq ? eq = 0 : eq) : eq = 0,如果eq是0则使用0,否则的话将使用eq传递的值,eq值要小于数组长度,否则eq值设置为0。
(16).this.oEve(onEnd),覆盖默认设置。
(17).this.onEnd.method == 'mouseover' ? this.method = "mouseover" : this.method = "click",判断是mouseover事件还是click事件。
(18).this.onEnd.autoplay == 'stop' ? this.autoplay = "stop" : this.autoplay = "play",默认是自动播放,否则就不是自动播放。
(19).this.aCont[eq].style.display = 'block',默认内容项显示。
(20).this.aLi[eq].className = 'hove',设置对应的标题选项卡样式。
(21).this.display(dis),注册事件处理函数,参数是一个样式类名称。
(22).this.autoPlayTab(eq, dis),执行此函数确保在允许自动切换的时候选项卡可以自动切换。
(23).

用来进行对象合并

oEve: function(onEnd){
 this.onEnd = {
  method: 'mouseover',
  autoplay: 'stop',
 };
 Object.extend(this.onEnd, onEnd || {});
}

这是默认的设置

this.onEnd = {
 method: 'mouseover',
 autoplay: 'stop',
}

如果传递了onend对象,就将其合并到默认对象,否则合并一个空对象

Object.extend(this.onEnd, onEnd || {})

(24).display : function(dis){},注册事件处理函数,参数是一个样式类名称。
(25).var _this = this,将this赋值给变量_this,为什么这么做后面会介绍。(26).var index = iNow = 0,进行一些初始化操作。
(27).for(index=0;index<_this.aLi.length;index++){},通过for循环遍历的方式注册事件处理函数。
(28)

.(function(){ var j = index;
 addEvent(_this.aLi[j], _this.method,
 function() {
  _this.fnClick(j,dis);
  _this.autoPlayTab(j, dis);
 })
})()

使用匿名自执行函数,其实就是形成了一个闭包。
之所以用闭包,是为了隔离匿名函数内部的index值和外部的index值。
之所以将this赋值给_this是因为,事件处理函数中的this是指向元素li的,而不是指向Tab()构造函数的对象实例。
(29).autoPlayTab : function(iNow, dis){},此函数实现了自动切换功能,第一个参数规定当前选项卡切换所处的索引位置,第二个参数一个样式类名称,就是设置处于当前状态的样式。
(30).if(this.autoplay == 'play'){},判断是否允许自动切换。
(31).var _this = this,将this赋值给变量_this,原理和上面是一样的。
(32).this.iNow = iNow,进行赋值操作。
(33).this.obj.onmouseover = function(){
  clearInterval(_this.timer);
},当鼠标悬浮的时候的时候停止定时器函数的执行,其实也就是停止自动切换。

(34).当鼠标离开的时候,开始自动切换动作

this.obj.onmouseout = function(){
 _this.timer = setInterval(playTab,5000);
}

(35).clearInterval(_this.timer),停止以前的定时器函数执行。
(36)._this.timer = setInterval(playTab,5000),开始自动切换。
(37).

function playTab(){
 if(_this.iNow == _this.aLi.length)_this.iNow = 0;
 _this.fnClick(_this.iNow, dis)
  _this.iNow++

}

不断调用此函数就实现了自动切换功能。
如果当前的索引等于li元素的个数,那么就将其设置为0,也就是从头进行新一轮切换。
然后调用对应的方法,并且让索引值自增。

(38)实现了选项卡的切换显示隐藏和样式设置效果

.fnClick : function(oBtn, dis){
  var index = 0;
  for(index=0;index<this.aLi.length;index++){
   this.aLi[index].className = '';
   this.aCont[index].style.display = 'none';
  }
  this.aLi[oBtn].className = dis;
  this.aCont[oBtn].style.display = 'block';
 }

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
prototype 中文参数乱码解决方案
Nov 09 Javascript
js location.replace与location.reload的区别
Sep 08 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
Jan 27 Javascript
jQuery图片的展开和收缩实现代码
Apr 16 Javascript
100个不能错过的实用JS自定义函数
Mar 05 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
重新认识vue之事件阻止冒泡的实现
Aug 02 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
详解Vue Cli浏览器兼容性实践
Jun 08 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 #Javascript
Jquery实现纵向横向菜单
Jan 24 #Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 #Javascript
JavaScript jquery及AJAX小结
Jan 24 #Javascript
基于JavaScript短信验证码如何实现
Jan 24 #Javascript
详解JS面向对象编程
Jan 24 #Javascript
js中实现字符串和数组的相互转化详解
Jan 24 #Javascript
You might like
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
php字符串按照单词进行反转的方法
2015/03/14 PHP
typecho插件编写教程(二):写一个新插件
2015/05/28 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
原生JS实现的双色球功能示例
2018/02/02 Javascript
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
玩转Koa之koa-router原理解析
2018/12/29 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
Python实现的微信公众号群发图片与文本消息功能实例详解
2017/06/30 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
时尚圣经:The Fashion Bible
2019/03/03 全球购物
英国行业制服供应商:Alexandra
2019/09/14 全球购物
德国户外商店:eXXpozed
2020/07/25 全球购物
护理学毕业生自荐信
2013/10/02 职场文书
食品业务员岗位职责
2014/03/18 职场文书
德育标兵事迹材料
2014/08/24 职场文书
三方股东合作协议书
2014/10/28 职场文书
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs