1//使用 

  var t1=new Tab({
etype:'onmou',//默认点击触发,如果事件写错了,当作单击
autoplay:2000,//有时间值(按照事件自动播放)和false(不自动播放)
invoke:3,//默认是第一项。
});

 
//插件的基本结构
;(function(){
function Tab(options){//options:配置参数
this.tab=document.querySelector('.tab');
this.tabBtn=document.querySelector('.tab_btn');
this.btns=this.tabBtn.getElementsByTagName('li');
this.divs=this.tab.querySelectorAll('.tab_item');
this.num=0;
this.timer=null;
this.options=options;
this.settings={//默认参数
etype:'onclick',//默认点击触发,如果事件写错了,当作单击
autoplay:3000,//有时间值(按照事件自动播放)和false(不自动播放)
invoke:1,//默认是第一项。
effect:'display'//display/opacity
}
this.init();
} Tab.prototype.init=function(){
var that=this;
extend(this.settings,this.options);
if(this.settings.etype=='onclick' || this.settings.etype!='onmouseover'){
this.tabSwitch('onclick');
}else if(this.settings.etype=='onmouseover'){
this.tabSwitch(this.settings.etype);
}
if(this.settings.autoplay){//如果配置参数传入一个时间,允许自动轮播,轮播的时间传过去
this.autoplay(this.settings.autoplay);
}
if(this.settings.invoke>1 && this.settings.invoke<=this.btns.length){
this.num=this.settings.invoke-1;
this.tabchange();
}
this.tab.onmouseover=function(){
clearInterval(that.timer);
}
this.tab.onmouseout=function(){
that.autoplay(that.settings.autoplay);
}
} Tab.prototype.tabSwitch=function(e){
var that=this;
for(var i=0;i<this.btns.length;i++){
this.btns[i].index=i;
this.btns[i][e]=function(){
that.num=this.index;
that.tabchange();
}
}
}
Tab.prototype.tabchange=function(){
for(var i=0;i<this.btns.length;i++){
this.btns[i].className='';
this.divs[i].className='hide';
if(this.settings.effect=='opacity'){
buffermove(this.divs[i],{opacity:0});
this.divs[i].style.display='none';
}
}
this.btns[this.num].className='active';
if(this.settings.effect=='display' || this.settings.effect!='opacity'){
this.divs[this.num].className='show';
}else if(this.settings.effect=='opacity'){
this.divs[this.num].style.display='block';
buffermove(this.divs[this.num],{opacity:100});
}
}
Tab.prototype.autoplay=function(time){
var that=this;
this.timer=setInterval(function(){
that.num++;
if(that.num>=that.btns.length){
that.num=0;
}
that.tabchange();
},time);
} function extend(obj1,obj2){
for(var i in obj2){
obj1[i]=obj2[i];
}
return obj1;
}
window.Tab=Tab;
})();

一个小的tab切换插件的更多相关文章

  1. jquery做一个小的轮播插件---有BUG,后续修改

    //首页无缝轮播 ; (function($, window, document, undefined) { $.fn.slider = function(options) { var default ...

  2. 微信小程序tab切换,可滑动切换,导航栏跟随滚动实现

    简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会 ...

  3. iTabs Tab切换插件

    最近项目中使用到Tab切换,切换的页面不变,内容发生变化,随手写了份简单的插件,附带源码.先看样子: 本人也考虑到是否使用jquery ui tab,但是还是热衷于自己写一份,首先好处之一是易于培训, ...

  4. 根据id来实现小程序tab切换,

    本例根据绑定id来实现tab切换,但本例仍有缺陷,用for循环数据,无法实现切换.如有大神能够有更好方法,欢迎留言更正 WXML: <view class="tab"> ...

  5. 编写tab切换插件

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  6. 小程序tab切换 点击左右滑动

    wxml <scroll-view scroll-x="true" class="navbar-box"> <block wx:for=&qu ...

  7. 关于一个页面的tab切换整体页面刷新而tab标签处是同一个文件怎么做焦点的问题

    解决方法,不能直接写点击效果就要在超链接中加一个参数,根据参数的值去给变焦点的效果,实现方法如下: <div class="vip_search">           ...

  8. 从一个简单的Tab切换开始——与AJAX的结合

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 小程序——Tab切换

    <view class="body"> <view class="nav bc_white"> <view class=" ...

随机推荐

  1. BCDEdit命令添加WinPE启动项

    bcdedit /create {ffffffff-8d96-11de-8e71-ffffffffffff} /d "系统维护" /device bcdedit /create   ...

  2. 洛谷P2286 [HNOI2004]宠物收养场【Treap】题解+AC代码

    题目传送门啦~啦~啦~ 题目描述 凡凡开了一间宠物收养场.收养场提供两种服务:收养被主人遗弃的宠物和让新的主人领养这些宠物. 每个领养者都希望领养到自己满意的宠物,凡凡根据领养者的要求通过他自己发明的 ...

  3. JDK1.7源码分析01-Collection

    同步发布:http://www.yuanrengu.com/index.php/20180221.html Java的集合类主要由两个接口派生而出:Collection和Map.Collection是 ...

  4. WinServer2012 R2忘记密码的解决方案+远程连接另一种莫名其妙故障

    http://www.cnblogs.com/dunitian/p/4822808.html#iis 之前朋友有问道我WinServer2003密码破解的事情,基本上密码忘记了都是进PE用密码清除的工 ...

  5. Activiti中的log4j(slf4j)的配置

    今天试了一下在Activiti中使用log4j来进行配置发现这个会出现问题,其实Activiti中的日志系统是采用的是slf4j而不是log4j 然后使用slf4j驱动log4j来做的 通过Proce ...

  6. 《android开发艺术探索》读书笔记(三)--分发机制和滑动冲突

    接上篇<android开发艺术探索>读书笔记(二) No1: 通过MotionEvent对象可以得到点击事件发生的x和y坐标,getX/getY返回的是相对于当前View左上角的x和y坐标 ...

  7. hihoCoder 1015 KMP算法

    题意:经典字符串匹配算法.给定原串和模式串,求模式串在原串中出现的次数.算法讲解 AC代码 #include <cstdio> #include <cmath> #includ ...

  8. typeahead + JDK 8 并行流 + redis 高速即时查询.

    感谢JDK8,让我们JAVA 程序员暂时不用担心失业. 有些情况,需要根据用户输入值,即时查询数据库,MYSQL显然不再适合这种业务. mongoDB看似最适合,但是为了这么一个破功能,也不值得特意去 ...

  9. SecureCRT8.0设置语法高亮

    SecureCRT默认不显示语法高亮,整个界面颜色单一,用起来很不舒服,也没有效率,所有通过设置一下语法高亮还是很有必要的, 默认字体也看着不是很清晰.所以还是修改一下预告高亮比较好 设置语法高亮,多 ...

  10. 关于instrinsicContentSize, ContentHuggingPriority, ContentcompressionResistancePriority的理解

    ios 关于intrinsic理解 最近由于项目的需要想给MBProgressHUD添加一个自定义的view, 结果花费了一两个小时也没添加上去,添加上去的view没有实际的大小,即使你给他设置了一个 ...