<!DOCTYPE html> <html lang="en"> <head> <title>Query选项卡插件</title> <style type="text/css"> * { margin: 0; padding: 0; } body { font-family: "Microsoft Yahei"; font-size: 14px; color: #333; } a, a:hover { text-decoration: none; color: #333; } ul, li { list-style: none; } .tab { width: 400px; margin: 30px auto; } .tab-title { height: 30px; font-size: 0; background-color: #f5f5f5; } .tab-title .item { display: inline-block; width: 80px; height: 30px; line-height: 30px; text-align: center; color: #333; font-size: 16px; } .tab-title .item-cur { color: #fff; background-color: #80b600; } .tab-cont { position: relative; background-color: #80b600; width: 400px; height: 200px; overflow: hidden; } .tab-cont__wrap { position: absolute; } .tab-cont .item { width: 400px; height: 200px; line-height: 200px; text-align: center; color: #fff; } </style> </head> <body> <div class="tab" js-tab="1"> <div class="tab-title"> <a href="javascript:;" class="item item-cur">Tab1</a> <a href="javascript:;" class="item">Tab2</a> <a href="javascript:;" class="item">Tab3</a> <a href="javascript:;" class="item">Tab4</a> <a href="javascript:;" class="item">Tab5</a> </div> <div class="tab-cont"> <ul class="tab-cont__wrap"> <li class="item" style="display: block;">Cont1</li> <li class="item" style="display: none;">Cont2</li> <li class="item" style="display: none;">Cont3</li> <li class="item" style="display: none;">Cont4</li> <li class="item" style="display: none;">Cont5</li> </ul> </div> </div> <div class="tab" js-tab="2"> <div class="tab-title"> <a href="javascript:;" class="item">Tab1</a> <a href="javascript:;" class="item item-cur">Tab2</a> <a href="javascript:;" class="item">Tab3</a> <a href="javascript:;" class="item">Tab4</a> <a href="javascript:;" class="item">Tab5</a> </div> <div class="tab-cont"> <ul class="tab-cont__wrap" style="width: 2000px; left: -400px;"> <li class="item" style="float: left;">Cont1</li> <li class="item" style="float: left;">Cont2</li> <li class="item" style="float: left;">Cont3</li> <li class="item" style="float: left;">Cont4</li> <li class="item" style="float: left;">Cont5</li> </ul> </div> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> ;(function ($, window, document, undefined) { var Plugin = function (elem, options) { this.$wrapper = elem; this.$tab_list = this.$wrapper.find('.tab-title').find('.item'); this.$tabCont_wrap = this.$wrapper.find('.tab-cont__wrap'); this.$tab_cont = this.$tabCont_wrap.find('.item'); this.timer = null; this.playTimer = null this.iNow = 0; this.defaults = { curDisplay: 1, mouse: 'click', changeMethod: 'default', autoPlay: false }; this.opts = $.extend({}, this.defaults, options); }; Plugin.prototype = { inital: function () { var self = this; this.setData(); this.tabInital(); if (this.opts.mouse === 'click') { this.$tab_list.click(function () { self.changeTab($(this).index()); self.iNow = $(this).index(); }); } else if (this.opts.mouse === 'over') { this.$tab_list.hover(function () { var cur_obj = this; clearTimeout(self.timer); self.timer = setTimeout(function () { self.changeTab($(cur_obj).index()); }, 30); self.iNow = $(this).index(); }, function () { clearTimeout(self.timer); }); } else { this.$tab_list.click(function () { self.changeTab($(this).index()); self.iNow = $(this).index(); }); } if (this.opts.autoPlay) { clearInterval(this.playTimer); this.playTimer = setInterval(function () { self.autoPlay(); }, 1000); this.$wrapper.hover(function () { clearInterval(self.playTimer); }, function () { self.playTimer = setInterval(function () { self.autoPlay(); }, 1000); }); } }, setData: function () { // 设置样式 var tabCont_w = this.$tab_cont.width(); var tabCont_h = this.$tab_cont.height(); var tabCont_len = this.$tab_cont.length; switch(this.opts.changeMethod) { case 'default' : this.$tab_cont.css({display: 'none'}); break; case 'horizontal' : this.$tabCont_wrap.css({width: tabCont_w * tabCont_len}); this.$tab_cont.css({float: 'left'}); break; case 'vertical' : this.$tabCont_wrap.css({height: tabCont_h * tabCont_len}); break; case 'opacity' : this.$tab_cont.css({display: 'none'}); break; default : this.$tab_cont.css({display: 'none'}); break; } }, tabInital: function () { // 初始化当前显示 var curNum = this.opts.curDisplay - 1; this.$tab_list.removeClass('item-cur'); this.$tab_list.eq(curNum).addClass('item-cur'); if (this.opts.changeMethod === 'default' || this.opts.changeMethod === 'opacity') { this.$tab_cont.eq(curNum).css({display: 'block'}); } else if (this.opts.changeMethod === 'horizontal') { this.$tabCont_wrap.css({left: -curNum * this.$tab_cont.width()}); } else if (this.opts.changeMethod === 'vertical') { this.$tabCont_wrap.css({top: -curNum * this.$tab_cont.height()}); } else { this.$tab_cont.eq(curNum).css({display: 'block'}); } this.iNow = this.opts.curDisplay - 1; }, changeTab: function (index) { // 选项卡切换 this.$tab_list.removeClass('item-cur'); this.$tab_list.eq(index).addClass('item-cur'); switch(this.opts.changeMethod) { case 'default' : this.$tab_cont.css({display: 'none'}); this.$tab_cont.eq(index).css({display: 'block'}); break; case 'horizontal' : this.$tabCont_wrap.stop().animate({left: this.$tab_cont.width() * -index}); break; case 'vertical' : this.$tabCont_wrap.stop().animate({top: this.$tab_cont.height() * -index}); break; case 'opacity' : this.$tab_cont.stop().fadeOut(); this.$tab_cont.eq(index).stop().fadeIn() break; default : this.$tab_cont.css({display: 'none'}); this.$tab_cont.eq(index).css({display: 'block'}); break; } }, autoPlay: function () { // 自动播放 if (this.iNow === this.$tab_list.length - 1) { this.iNow = 0; } else { this.iNow ++; } this.changeTab(this.iNow); }, constructor: Plugin }; $.fn.tab = function (options) { var plugin = new Plugin(this, options); return plugin.inital(); }; })(window.jQuery, window, document); </script> <script type="text/javascript"> $(function () { /** =========== ??????? ============ curDisplay: ?????????? mouse: ?????? (click/over) changeMethod: ?л???? (default/vertical/horizontal/opacity) autoPlay: ??????? (true/false) */ // ???????????仯??? /*$('.tab').each(function () { $(this).tab({ curDisplay: 5, mouse: 'over', changeMethod: 'vertical' }); });*/ // ?????????仯??????????HTML?м???js-tab?? $('[js-tab=1]').tab(); $('[js-tab=2]').tab({ curDisplay: 2, changeMethod: 'horizontal' }); }); </script> </html> 提示：你可以先修改部分代码再运行。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>http://runjs.cn/code/bpxldiw1</title> <style type="text/css"> *{ box-sizing: border-box; margin: 0; padding: 0; list-style: none; } body{ background-color: #323232; font-size: 12px; } img{ display: block; width: 100%; height: 185px; } .tab{ width: 300px; margin: 20px auto; } .tab-top:after{ content: ""; clear: both; display: table; } .tab-top li{ float: left; margin-right: 5px; border-radius: 3px 3px 0 0; line-height: 40px; text-align: center; width: 50px; color: white; cursor: pointer; font-size: 16px; background-color: #767676; } .tab-top li.active{ background-color: white; color: #333; } .tab-main{ background-color: white; width: 100%; height: 195px; position: relative; } .tab-item{ display: none; width: 100%; height: 100%; padding: 5px; position: absolute; background-clip: content-box; } .tab-item.active{ display: block; } .tab-item:nth-child(1){ background: royalblue; } .tab-item:nth-child(2){ background: greenyellow; } .tab-item:nth-child(3){ background: burlywood; } </style> </head> <body> <div class="js-tab tab"> <ul class="tab-top"> <li class="active">11</li> <li>22</li> <li>33</li> <li>44</li> </ul> <div class="tab-main"> <div class="tab-item current">111</div> <div class="tab-item">222</div> <div class="tab-item">333</div> <div class="tab-item">444</div> </div> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> /** * Created by wty on 2017/6/29. */ !function($){ var Tab = function(tab,setConfig){ //保存自身类 var _this = this; //保存单个tab组件 this.tab = tab; //默认配置参数 this.config = { "triggerTab":"mouseover",//鼠标触发方式 "effect":"default",//切换效果 "invoke":2,//默认选中第几个 "auto":5000,//自动切换 }; //传入参数配置替换 if(setConfig&&setConfig!=null){ $.extend(this.config,setConfig); } //保存tab标签和tab列表 this.tabItems = this.tab.find("ul.tab-top li"); this.tabContentItems = this.tab.find(".tab-main .tab-item"); //保存配置参数 var config = this.config; console.log(config.triggerTab); //点击事件 if(config.triggerTab === "click"){ this.tabItems.bind(config.triggerTab,function(){ _this.invoke($(this));//切换 }); } //不是click也不是mouseover执行mouseover else if(config.triggerTab === "mouseover" || config.triggerTab !== "click"){ this.tabItems.bind("mouseover",function(){ _this.invoke($(this)); }); } //自动切换功能,如果设置了时间就按设置时间进行切换，设置false不自动切换 if(config.auto){ //定义全局定时器 this.timer = null; //计数器 this.loop = 0; //自动播放 this.autoPlay(); //鼠标放上清空定时器 this.tab.hover(function(){ clearInterval(_this.timer); },function(){ _this.autoPlay(); }); } //默认选中第几个 if(config.invoke > 1){ this.invoke(this.tabItems.eq(config.invoke - 1)); } } Tab.prototype = { //自动播放 autoPlay:function(){ var _this = this, tabItems = this.tabItems,//临时保存tab列表 tabLength = tabItems.size(),//tab列表元素个数 config = this.config;//配置项 console.log(this); this.timer = setInterval(function(){ _this.loop++; if(_this.loop >= tabLength){ _this.loop = 0; } tabItems.eq(_this.loop).trigger(config.triggerTab); },config.auto) }, invoke:function(currentTab){ var _this = this; /*** * 执行tab选中状态 * 当前选中加上active * 切换当前对应的内容根据配置参数的effect值deault还是fade * **/ var index = currentTab.index(); var conItems = this.tabContentItems; //tab选中状态 currentTab.addClass("active").siblings("li").removeClass("active"); var effect = this.config.effect; if(effect === "default" || effect !== "fade"){ conItems.eq(index).show().siblings(".tab-item").hide(); } else if(effect === "fade"){ conItems.eq(index).fadeIn().siblings(".tab-item").fadeOut(); } console.log(effect); //loop和index做同步 //如果配置了自动播放auto才能设置 if(this.config.auto){ this.loop = index; } } }; //调用直接new Tab.init = function(tabs){ var _this = this; tabs.each(function(){ new _this($(this)); }); } //注册jQuery方法 $.fn.extend({ tab:function(config){ console.log(config); //Tab.init(this) this.each(function(){ new Tab($(this),config||null); }); return this; } }); //注册至命名空间 window.Tab = Tab; }(jQuery) $(".js-tab").tab({ "triggerTab":"click", "effect":"fade", "invoke":2, "auto":3000 }) .css("background","#333"); </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » jQuery选项卡插件 喜欢 (0)or分享 (0)
