图奈娱乐

全部频道

您的当前位置：首页Jquery封装tab自动切换效果的具体实现_jquery

Jquery封装tab自动切换效果的具体实现_jquery

来源：图奈娱乐


今天我这边网速真是太慢了，打开一个网页要等待很久，但是还是想写篇文章----tab自动切换 因为工作中经常会碰到这样的问题 所以写博客也是总结下 最重要的是能分享下 及以后碰到类似的可以参考下！ 当然这是我用Jquery来封装的 页面可以调用多次 调用方式 new tabSlider(obj,count); obj指容器最外层ID,count指有多个li 当然要引用我这个js的话 一定要按照我结构来写！下面的是我的HTML一些结构如下：
代码如下:


  • tab1

  • tab2

  • tab3

  • tab4



    • tab1
    tab2
    tab3
    tab4



    结构是这样的！下面是我页面上的HTML/CSS的代码！
    代码如下:

    无标题文档







  • tab1

  • tab2

  • tab3

  • tab4



    • tab1
    tab2
    tab3
    tab4





  • tab1

  • tab2

  • tab3

  • tab4



    • tab1
    tab2
    tab3
    tab4


    new tabSlider("#tab1",4);
    new tabSlider("#tab2",4);



    JS代码如下：
    代码如下:
    // JavaScript Document
    /*
    *@date 2011 10 24
    *@ author tugenhua
    *@ email tugenhua@126.com
    *@ 可以一个页面多次引用
    依赖的结构 */


  • tab1

  • tab2

  • tab3

  • tab4



    • tab1
    tab2
    tab3
    tab4


    /*页面引用的方式
    new tabSlider("#tab1",4);
    #tab1 是外部ID,4 指 一共有多少个li
    */
    function tabSlider(obj,count){
    var _this = this;
    _this.obj = obj;
    _this.count = count;
    _this.time = 2000;//停留的时间
    _this.n = 0;
    var t;
    this.slider = function(){
    $(_this.obj + " .menu li").bind("mouseover",function(event){
    $(event.target).addClass("current").siblings().removeClass("current");
    var index = $(_this.obj + " .menu li").index(this);
    $(_this.obj + " .content-main .content").eq(index).show().siblings().hide();
    _this.n = index;
    })
    }
    this.addhover = function(){
    $(_this.obj).hover(function(){clearInterval(t);},function(){t=setInterval(_this.autoplay,_this.time)});
    }
    this.autoplay = function(){
    _this.n = _this.n >=(_this.count-1)? 0 : ++_this.n;
    $(_this.obj + " .menu li").eq(_this.n).trigger("mouseover");
    }
    this.factory = function(){
    this.slider();
    this.addhover();
    t = setInterval(this.autoplay,_this.time);
    }
    this.factory();
    }

    下面来说说下我封装这个js的思路，因为写任何程序 思路是最重要的，只要能想的清楚 代码就一定能实现掉！思路说的更好听的话 就是我们常说的“算法”！
    1 function tabSlider(obj,count){} 用这个js来封装后传入参数！当在HTML页面上时直接调用tabSlider(obj,count)就可以了！
    2 初始化一些参数 然后给这个函数自生自定义一个函数this.slider = function(){} 绑定个mouseover事件，初始化第一个li时 查找当前的div内容是否和当前li 指向同一个指针 如果相同 那块内容显示！其他的隐藏！
    3 自定义this.addHover这个事件 当鼠标移上时候抽发这个事件！
    4 自定义自动播放事件this.autoplay = function(){} 这个里面用了trigger这个触发方法_this.n = _this.n >=(_this.count-1)? 0 : ++_this.n;
    $(_this.obj + " .menu li").eq(_this.n).trigger("mouseover");
    5 最后用个函数 来渲染上面的函数 调用上面的函数
    代码如下:
    this.factory = function(){
    this.slider();
    this.addhover();
    t = setInterval(this.autoplay,_this.time);
    }
    this.factory();
    显示全文