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自动切换功能的更多相关文章

  1. 每天一个JavaScript实例-tab标签切换

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. tabs自动切换功能的实现

    <html><head><!-- Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href= ...

  3. jQuery实现用户输入自动完成功能

    jQuery实现用户输入自动完成功能 利用jQuery UI中Auto-complete插件实现输入自动完成功能,大家在使用诸如淘宝.京东等电商平台搜索商品时,往往只要输入商品的一些特殊字符,就可以显 ...

  4. jquery 实现邮箱输入自动提示功能：（二）

    上篇文章写到了一个不错的jquery实现邮箱输入自动提示功能,发现还有一个不错的自动提示插件: 先展示结果如图: html代码: <center> <h1>输入邮箱试试!< ...

  5. jsp 回车代替tab 自动切换text焦点

    方法一keyCode (IE11以后失效) <html> <head> <meta http-equiv="Content-Type" content ...

  6. jquery 实现邮箱输入自动提示功能

    邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能,所有自己也实现了一个,先看下效果吧,觉得效果还行的就拿去 ...

  7. jquery 实现邮箱输入自动提示功能：（一）

    记得去年做某个项目的时候,用到了邮箱输入自动提示功能,于是网上搜了一下,发现了这个写得不错,现在回想起来,转载一下,方便查阅. 邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作 ...

  8. JS 实现 Tab标签切换功能

    Tab标签切换 效果图: HTML部分: <div class="wrap">     <ul id="tag">       < ...

  9. Axure实现Tab选项卡切换功能

    这几天用Axure画原型图的过程中,须要实现Tab选项卡切换的效果,但Axure中并没有类似于Tab控件的部件,所以能够用Axure中的动态面板(Dynamic Panel)来实现. 本文以已经汉化的 ...

随机推荐

  1. ng-file-upload结合springMVC使用

    引入angular和ng-file-upload. 前端代码 Upload.upload({ url: 'upload', fields: {'username': 'zouroto'}, // ad ...

  2. 使用java修改图片DPI

    修改以后可以直接用PS打开看效果 全部使用rt下的类,无需下载其他jar包 import com.sun.image.codec.jpeg.JPEGCodec; import com.sun.imag ...

  3. iOS UTI

    UTI全拼Uniform Type Identifier,直接翻译过来就是统一类型标示符. 这个东西可以实现的功能就是设备之间或者app之间的文件传输. 有兴趣的领个支付宝红包再走, ^_^ 全套相关 ...

  4. EasyUI datagird 排序 按数字类型的问题

    easyui datagird 默认显示的数据都是字符, 对要数字列进行排序规则,需要自定义排序规则如果按字符排序 27竟然小于4 这不是我们想要的.解决方案 <table id='grid'c ...

  5. JavaWeb下载文件response

    以下代码在 chrome.firefox,安卓自带手机浏览器上测试通过,但未经过完全测试,先记录下 public static void downLoadFile(HttpServletRequest ...

  6. win10 docker 安装部署

    Docker 安装教程: https://blog.csdn.net/hunan961/article/details/79484098 安装docker前需要首先开启虚拟服务:重启电脑-->F ...

  7. java学习记录--ThreadLocal使用案例

    本文借由并发环境下使用线程不安全的SimpleDateFormat优化案例,帮助大家理解ThreadLocal. 最近整理公司项目,发现不少写的比较糟糕的地方,比如下面这个: public class ...

  8. unity, 删除animationClip中的position曲线

    删除clip中所有的position曲线: using UnityEngine; using System.Collections; using UnityEditor; public class r ...

  9. WPF 程序在 Windows XP 下报错：The image format is unrecognized.

    最近做的一个 WPF 程序,在 Windows 7 或以上版本的系统中,测试都很正常,在 Windows XP 下运行时一开始就报了个错误: {     "ClassName" : ...

  10. Spring ORM数据訪问——Hibernate

    Hibernate 我们将首先介绍Spring环境中的Hibernate 5.然后介绍使用Hibernate 5来演示Spring集成O-R映射器的方法. 本节将具体介绍很多问题,并显示DAO实现和事 ...