<div class="wrapper" id="wrapper">
<ul class="tab" id="tab-menu">
<li class="tab-item active">国际大牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products" id="tab-main">
<div class="main selected">
<a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>
</div>
</div>
</div>
var tb = new Tab({
tabMenu: "tab-menu", // 指定tab栏菜单id
tabMain: "tab-main", // 指定tab栏内容id
auto: true // 是否自动播放
});

面向对象封装

function Tab(obj) {
this.tabMenus = null;
this.tabMains = null;
if(obj) {
this._init(obj);
}
}
Tab.prototype = {
constructor: Tab,
timer : null,
_init:function(obj){
this.initEle(obj);
this.click();
if(obj.auto){
this.autoPlay();
} },
initEle:function(obj){
var tabMenu = document.getElementById(obj.tabMenu);
var tabMain = document.getElementById(obj.tabMain);
this.tabMenus = tabMenu.children;
this.tabMains = tabMain.children;
},
click: function() {
var that = this;
for(var i=0,len=this.tabMenus.length;i<len;i++) {
this.tabMenus[i].onclick = function(){
that.show(this);
that.autoPlay(this.index);
}
}
},
show: function(currentLi) {
for(var i=0,len=this.tabMenus.length;i<len;i++) {
this.tabMenus[i].index = i;
this.tabMenus[i].className = "tab-item";
this.tabMains[i].style.display = "none";
}
currentLi.className += " active";
this.tabMains[currentLi.index].style.display = "block";
},
autoPlay: function(currentIndex){
var that = this;
var index = 0;
if(currentIndex !== undefined && currentIndex !== ""){
index = currentIndex;
}
clearInterval(this.timer);
this.timer = setInterval(function(){
index++;
if(index == that.tabMenus.length){
index = 0;
}
that.show(that.tabMenus[index]);
},2000);
}
}

注意事项:

这里要注意timer的位置,如果将timer放在构造函数里如this.timer=null,则_init()方法要用新创建出的对象来调用timer才生效(tb._init())
如果在构造函数里使用 this._init(obj);来初始化,则timer要放到原型对象里(timer:null)才生效
这里的生效是指清除定时器时clearInterval(this.timer); this.timer为同一个对象 正常情况下this.timer值为null,未生效的情况下值为undefined
由于一些经验不足上面的一段解释是错误的,造成timer值为Undefined的原因为this.timer=null应该在调用方法_init()之前定义
												

面向对象版Tab栏切换的更多相关文章

  1. ES6面向对象实现tab栏切换效果

    面向对象实现tab栏切换效果

  2. 前端—我的第一篇博客 梦开始的地方(面向对象版tab栏)

    这是我的第一篇博客 博客生涯才开始 但是人生已经过去了二十个年头了 才开始弄这个 也没搞得太懂 我原本的想法是想搞个源代码上来 但是看了半天好像就只能传html源代码 那我还有css js的部分呢 我 ...

  3. jQuery带有定时器的tab栏切换

    现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...

  4. dataTable tab栏切换时错位解决办法

    做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...

  5. tab栏切换

    最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...

  6. tab栏切换制作

    tab栏切换制作 先上图 要求1:默认状态,第一个选项卡被选中,展示第一个选项卡的内容 策略:第一个选项卡默认有被选中的样式,第一个选项卡对应的display: block,其他的dispaly设为n ...

  7. JS实现 Tab栏切换案例

    要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...

  8. JS高级——面向对象方式解决tab栏切换问题

    注意事项 1.给li元素注册事件,函数里面的this指的li元素,那么我们可以在注册事件之前将Tab对象用that=this进行保存 2.使用沙箱模式,所以暴露给外面的变量使用的是window.tab ...

  9. tab栏切换的特殊效果

    在实际的开发过程中,我们可能会遇到这种需求,如下图 左边是三个tab栏,右边是显示内容的div,当鼠标滑到坐标的tab上时,给它一个高亮显示,让它对应的内容在右边的div中显示出来,当鼠标移出的时候把 ...

随机推荐

  1. Java的类型强制转换

    不说基本类型,没什么意思. 小括号的类型转换,在引用上,表示我坚定的确信,该未知类型一定是我转的类型,或者是我转的类型的子类. 这个转换逻辑和基本类型是不一致的.它不会进行任何具体的操作,只是一种标识 ...

  2. 深度学习(PYTORCH)-3.sphereface-pytorch.lfw_eval.py详解

    pytorch版本sphereface的原作者地址:https://github.com/clcarwin/sphereface_pytorch 由于接触深度学习不久,所以花了较长时间来阅读源码,以下 ...

  3. Vue开发爬坑记录

    1.使用eslint代码检查时,常见的的错误: 1.1 Expected indentation of 0 spaces but found 1 前面的空格个数不对.应该不能有空格. 1.2 Stri ...

  4. eclipse 中git无法https下载提交代码

    使用eclipse下载github代码时,报错信息为cannot open git-upload-pack,如下图: 其实就是ssl协议的版本不对, 2018年2月8日后禁止通过TLSv1.1协议连接 ...

  5. docker for windows 部署gitlab

    gitlab的安装相对繁琐,如果使用docker 镜像的方式就轻松太多了. 我是用的环境是windows10 专业版 + docker for windows 1.右键docker打开Kitemati ...

  6. centos7 - mongodb3.6.5-配置文件

    创建Linux管理员账号admin, 并加入wheel组,对mongodb, php等进行统一管理~ systemLog:destination: filelogAppend: truepath: / ...

  7. Ubuntu 16.04 环境下配置apache2.4 + php5.6

    相信用惯了Windows的朋友一开始接触Linux是很崩溃的,因为很多东西都是通过命令行来完成的,包括安装绝大多数的开发工具以及环境,那么在Ubuntu下其实可以直接通过apt-get指令来安装apa ...

  8. mysql 导入数据库问题

    今天数据库迁移测试,发现存储过程导入不了,提示如下错误: Cannot load from mysql.proc. The table is probably corrupted 原因是mysql5. ...

  9. maven安装本地jar包到本地仓库命令

    mvn install:install-file -Dfile=C:\Users\windows\.m2\repository\com\jayway\jsonpath\json-path\2.2.0\ ...

  10. calcOpticalFlowPyrLK

    void calcOpticalFlowPyrLK( InputArray prevImg, InputArray nextImg,                                   ...