首页 > 代码库 > html+css+jQuery+JavaScript实现tab自动切换功能

html+css+jQuery+JavaScript实现tab自动切换功能

2024-11-27 02:33:39   203人阅读

tab1.html内容

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>tab选项卡</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            ul,li {
                list-style: none;
            }
            body {
                background-color: #323232;
                font-size: 12px;
                font-family: "微软雅黑"; 
                margin: 100px;
            }
        </style>
        <link rel="stylesheet" href="tab1.css" />
        <script src="../jquery-2.1.0.js" type="text/javascript"></script>
        <script src="tab1.js" type="text/javascript"></script>
    </head>

    <body>

        <div class="js-tab tab" data-config=‘{
                                                "triggerType": "mouseover",
                                                "effect": "fade",
                                                "invoke": 2,
                                                "auto": 3000
                                            }‘>
            <ul class="tab-nav">
                <li class="actived">
                    <a href="javascript:void(0);">新闻</a>
                </li>
                <li>
                    <a href="#">娱乐</a>
                </li>
                <li>
                    <a href="#">电影</a>
                </li>
                <li>
                    <a href="#">科技</a>
                </li>
            </ul>
            <div class="content-wrap">
                <div class="content-item current" style="overflow: hidden;">
                    <img src="a.jpg" />
                </div>
                <div class="content-item" style="overflow: hidden;">
                    <img src="b.jpg" />
                </div>
                <div class="content-item" style="overflow: hidden;">
                    <img src="c.jpg" />
                </div>
                <div class="content-item" style="overflow: hidden;">
                    <img src="d.jpg" />
                </div>
            </div>
        </div>
        
        <script>
            $(function() {
                // TAB
                var tab1 = new Tab($(".js-tab").eq(0)); //
            });
        </script>

    </body>

</html>

tab1.css内容

.tab{width: 300px;}
.tab .tab-nav{height: 30px;}
.tab .tab-nav li {float: left;margin-right: 5px;background-color: #767676;border-radius: 3px 3px 0 0;}
.tab .tab-nav li a{display: block;height: 30px; padding: 0 20px; color: #FFFFFF;line-height: 30px; text-decoration: none;}
.tab .tab-nav li.actived{background-color: #FFFFFF;}
.tab .tab-nav li.actived a {color: #777;}
.tab .content-wrap{background-color: #FFFFFF;padding: 5px;height: 200px;}
.tab .content-wrap .content-item {position:absolute; height: 200px; width:290px; display: none;}

.tab .content-wrap {display: block;overflow: hidden;}
.tab .content-wrap .current{display: block;overflow: hidden;}

tab1.js内容

;(function($){
    
    var Tab = function(tab){
        
        var _this_ = this;
        //保存单个tab组件
        this.tab = tab;
        //默认配置参数
        this.config = {
            //用来定义鼠标的触发类型，是click还是mouseover
            "triggerType": "mouseover",
            //用来定义内容切换效果，是直接切换还是淡入淡出效果
            "effect": "default",
            //默认展示第几个tab
            "invoke": 1,
            //用来定义tab是否自动切换，当指定了时间间隔，就表示自动切换，并且切换时间为指定的时间间隔
            "auto": false
        };    
        //如果配置参数存在，就扩展掉默认的配置参数
        if(this.getConfig()){
            $.extend(this.config, this.getConfig());
        };
        
        //保存tab标签列表、对应的内容列表
        this.tabItems     = this.tab.find("ul.tab-nav li");
        this.contentItems = this.tab.find("div.content-wrap div.content-item");
        
        //保存配置参数
        var config = this.config;
        
        if(config.triggerType === "click"){
            this.tabItems.bind(config.triggerType, function(){
                _this_.invoke($(this));
            });
        }else if(config.triggerType === "mouseover" || config.triggerType != "click"){
            this.tabItems.mouseover(function(){
                _this_.invoke($(this));
            });
        };    
        
        //自动切换功能，当配置了时间，我们就根据时间间隔进行自动切换
        if(config.auto){
        
            //定义一个全局的定时器
            this.timer = null;
            //计数器
            this.loop = 0;
            
            this.autoPlay();
            
            //鼠标放到选中的区域，停止轮播，鼠标移开，开启自动轮播
            this.tab.hover(function(){
                window.clearInterval(_this_.timer)
            },function(){
                _this_.autoPlay();
            })
            
        };
        
        //设置默认显示第几个tab
        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;
                
            this.timer = window.setInterval(function(){
                _this_.loop++;
                if(_this_.loop>=tabLength){
                    _this_.loop = 0;
                };
                tabItems.eq(_this_.loop).trigger(config.triggerType)
            },config.auto)
            
        },
        //事件驱动函数
        invoke:function(currentTab){
            var _this_ = this;
            /***
             * 要执行Tab的选中状态，当前选中的加上activd（标记为白底）
             * 切换对应的tab内容，要根据配置参数的effect是default还是fade
             **/
            var index = currentTab.index();
            //tab选中状态
            currentTab.addClass("actived").siblings().removeClass("actived");
            //切换对应的内容区域
            var effect   = this.config.effect;
            var conItems = this.contentItems;
            if(effect === "default" || effect != "fade"){
                conItems.eq(index).addClass("current").siblings().removeClass("current");
            }else if(effect === "fade"){
                conItems.eq(index).fadeIn().siblings().fadeOut();
            }
            
            //注意：如果配置了自动切换，记得把当前的loop的值设置成当前的tab的index
            if(this.config.auto){
                this.loop = index;    
            };
            
        },
        
        //获取配置参数
        getConfig:function(){
            //拿一下tab elem节点上的data-config
            var config = this.tab.attr("data-config");
            //console.log(config)
            //确保有配置参数
            if(config && config!=""){
                return $.parseJSON(config);
            }else{
                return null;
            }
        }
        
    };
    
    window.Tab = Tab;
})(jQuery);

 

代码源自慕课网：http://www.imooc.com/learn/825

 

期待共同学习进步。。。

 

谢谢

html+css+jQuery+JavaScript实现tab自动切换功能


联系
我们