封装jQuery插件实现TAB切换

先上效果图：

封装jQuery插件实现TAB切换

直接上代码：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src='jquery.js'></script>
    <script src='tab.js'></script>
    <style>
        *{margin:0px;padding:0px;background-color: #757575}
        .tab{margin-left: 100px;margin-top: 100px;height: 250px;}
        .tab .tab-ul{height: 30px;}
        .tab .tab-ul .tab-li{float:left;margin-right: 5px;list-style: none; background-color: #323232;color: #fff;display: block;width: 50px;border-radius: 5px 5px 0 0 ;text-align: center;cursor: pointer;}
        .tab .tab-ul .active{color: #323232;  background-color: #fff;}
        .tab .content-warp{width: 200px;height: 200px;background-color: #fff;overflow: hidden;padding:5px;}
        .tab .content-warp .content{width: 200px;height: 200px;display: none}
        .tab .content-warp .content img{width:100%;height: 100%;}
        .tab .content-warp .current{display: block}
    </style>
</head>
<body>
    <div class="tab" data-config='{
            "event":"click",
            "time":false,
            "type":"default"
        }'>
        <ul class="tab-ul">
            <li class="tab-li active">新闻</li>
            <li class="tab-li">热点</li>
            <li class="tab-li">军事</li>
            <li class="tab-li">社会</li>
        </ul>
        <ul class="content-warp">
            <li class="content current"><img src="img/1.jpg"></li>
            <li class="content"><img src="img/2.jpg"></li>
            <li class="content"><img src="img/3.jpg"></li>
            <li class="content"><img src="img/4.jpg"></li>
        </ul>
    </div>

    <div class="tab" data-config='{
            "event":"mouseover",
            "time":false,
            "type":"fade"
        }'>
        <ul class="tab-ul">
            <li class="tab-li active">新闻2</li>
            <li class="tab-li">热点2</li>
            <li class="tab-li">军事2</li>
            <li class="tab-li">社会2</li>
        </ul>
        <ul class="content-warp">
            <li class="content current"><img src="img/1.jpg"></li>
            <li class="content"><img src="img/2.jpg"></li>
            <li class="content"><img src="img/3.jpg"></li>
            <li class="content"><img src="img/4.jpg"></li>
        </ul>
    </div>

    <div class="tab" data-config='{
            "event":"click",
            "time":3000,
            "type":"fade"
        }'>
        <ul class="tab-ul">
            <li class="tab-li active">新闻2</li>
            <li class="tab-li">热点2</li>
            <li class="tab-li">军事2</li>
            <li class="tab-li">社会2</li>
        </ul>
        <ul class="content-warp">
            <li class="content current"><img src="img/1.jpg"></li>
            <li class="content"><img src="img/2.jpg"></li>
            <li class="content"><img src="img/3.jpg"></li>
            <li class="content"><img src="img/4.jpg"></li>
        </ul>
    </div>
<script>
    $(".tab").tab();
</script>
</body>
</html>

插件tab.js!function(function(ele){

 ele;
        config = JSON.parse(ele.attr('data-config'));
        //默认配置
        this.config = {
            "event":"mouseover",//触发事件
            "time":2000,//切换时间 false 为不切换
            "invoke":1,//默认tab
            "type":"default"//切换方式 默认和淡出
        };
        $.extend(this.config, config);

        //默认地址
        this.index = this.config.invoke;
        //点击事件
        this.switch();

        //默认显示
        this.invoke();

        //轮播
        this.loopfun();
    };

    Tab.prototype  = {
        "switch":function(){
            ele = this.ele;
            var that = this;
            config = this.config;
            event = config.event == "click"?"click":"mouseover";
            if(config.type == "default"){
                ele.find(".tab-li").on(event, function(e, par1){
                    //par1存在则为模拟请求
                    $(this).addClass("active").siblings().removeClass("active");//tab
                    var index = $(this).index();
                    that.ele.find(".content").eq(index).show().addClass("current").siblings().removeClass("current").hide();
                    if(that.loop && !par1){
                        clearInterval(that.loop);  
                        that.loop = null;
                    }
                    that.addIndex(index);
                }).on('mouseout', function(){
                    if(!that.loop){
                        that.loopfun();
                    }
                });
            }else{
                ele.find(".tab-li").on(event, function(e, par1){
                    //par1存在则为模拟请求
                    $(this).addClass("active").siblings().removeClass("active");//tab
                    var index = $(this).index();
                    that.ele.find(".content").eq(index).fadeIn().siblings().fadeOut();
                    if(that.loop && !par1){
                        clearInterval(that.loop);  
                    }
                    that.addIndex(index);
                }).on('mouseout', function(){
                    that.loopfun();
                });
            }
        },
        "invoke":function(){
            ele = this.ele;
            config = this.config;
            ele.find('.tab-li').eq(config.invoke-1).addClass("active").siblings().removeClass("active");
            ele.find('.content').eq(config.invoke-1).addClass("current").siblings().removeClass("current");
        },
"addIndex":function(index){
            var count = this.ele.find('.tab-li').length;
            if(++index>=count){
                this.index = 0;
            }else{
                this.index = index;
            }
        },
        "loopfun":function(){
            if(this.config.time && parseInt(this.config.time)){    
                that = this;
                this.loop = setInterval(function(){
                    event = that.config.event == "click"?"click":"mouseover";
                    that.ele.find(".tab-li").eq(that.index).trigger(event, ['tri']);
                }, that.config.time)
            }
        }
    }
    
    //注册成jquery方法
    $.fn.extend({
        tab:function(){
            this.each(function(){
                new Tab($(this))
            })
            return this;
        }
    })
    window.Tab = Tab;
}(jQuery)

标签可随意设置成文本或其他内容，可自行修改。

依自己的理解对切换逻辑进行修改：

1.mousove触发切换时只有mouseout才会继续轮训切换

2.click触发切换时当鼠标在切换页也只有mouseout才会继续轮训切换

代码托管地址：https://github.com/yimijianfang/tab