欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Jquery封裝tab自動(dòng)切換效果的具體實(shí)現(xiàn)

 更新時(shí)間：2013年07月13日 14:12:33   作者：  
這篇文章介紹了Jquery封裝tab自動(dòng)切換效果的具體實(shí)現(xiàn)方法，有需要的朋友可以參考一下
  今天我這邊網(wǎng)速真是太慢了，打開一個(gè)網(wǎng)頁(yè)要等待很久，但是還是想寫篇文章----tab自動(dòng)切換 因?yàn)楣ぷ髦薪?jīng)常會(huì)碰到這樣的問題 所以寫博客也是總結(jié)下 最重要的是能分享下 及以后碰到類似的可以參考下！ 當(dāng)然這是我用Jquery來(lái)封裝的 頁(yè)面可以調(diào)用多次 調(diào)用方式                new tabSlider(obj,count); obj指容器最外層ID,count指有多個(gè)li 當(dāng)然要引用我這個(gè)js的話 一定要按照我結(jié)構(gòu)來(lái)寫！下面的是我的HTML一些結(jié)構(gòu)如下：
復(fù)制代碼 代碼如下:

<div id="tab1">
    <ul class="menu">
        <li class="current">tab1</li>
        <li>tab2</li>
        <li>tab3</li>
        <li class="last-col">tab4</li>
    </ul>
    <div class="content-main">
        <div class="content">tab1</div>
        <div class="content hide">tab2</div>
        <div class="content hide">tab3</div>
        <div class="content hide">tab4</div>
    </div>
</div>

結(jié)構(gòu)是這樣的！下面是我頁(yè)面上的HTML/CSS的代碼！
復(fù)制代碼 代碼如下:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<style>
#tab1{ width:196px; height:220px; overflow:hidden; border:1px solid #666;}
#tab2{ width:196px; height:220px; overflow:hidden; border:1px solid #666;}
.menu{ width:196px; height:18px; margin:0; padding:0;}
.menu li{ float:left; list-style:none; width:48px; text-align:center; border-bottom:1px solid #666; border-right:1px solid #666; cursor:pointer;}
.menu li.current{ border-bottom:none;}
.content-main{ width:196px; height:200px; overflow:hidden;}
.content{ width:196px; height:200px; overflow:hidden; display:block;}
.hide{ display:none;width:196px; height:200px; overflow:hidden;}
.menu li.last-col{ border-right:none; width:49px;}
</style>
<script src="AutoTab.js"></script>
</head>
<body>
<div id="tab1">
    <ul class="menu">
        <li class="current">tab1</li>
        <li>tab2</li>
        <li>tab3</li>
        <li class="last-col">tab4</li>
    </ul>
    <div class="content-main">
        <div class="content">tab1</div>
        <div class="hide">tab2</div>
        <div class="hide">tab3</div>
        <div class="hide">tab4</div>
    </div>
</div>
<br /><br />
<div id="tab2">
    <ul class="menu">
        <li class="current">tab1</li>
        <li>tab2</li>
        <li>tab3</li>
        <li class="last-col">tab4</li>
    </ul>
    <div class="content-main">
        <div class="content">tab1</div>
        <div class="hide">tab2</div>
        <div class="hide">tab3</div>
        <div class="hide">tab4</div>
    </div>
</div>
<script>new tabSlider("#tab1",4);</script>
<script>new tabSlider("#tab2",4);</script>
</body>
</html>

JS代碼如下：
復(fù)制代碼 代碼如下:

// JavaScript Document
    /*
    *@date 2011 10 24
    *@ author tugenhua
    *@ email tugenhua@126.com
    *@ 可以一個(gè)頁(yè)面多次引用
    依賴的結(jié)構(gòu) */
    <div id="tab1">
    <ul class="menu">
        <li class="current">tab1</li>
        <li>tab2</li>
        <li>tab3</li>
        <li class="last-col">tab4</li>
    </ul>
    <div class="content-main">
        <div class="content">tab1</div>
        <div class="content hide">tab2</div>
        <div class="content hide">tab3</div>
        <div class="content hide">tab4</div>
    </div>
</div>
/*頁(yè)面引用的方式
    new tabSlider("#tab1",4);
    #tab1 是外部ID,4 指 一共有多少個(gè)li
*/
function tabSlider(obj,count){
    var _this = this;
        _this.obj = obj;
        _this.count = count;
        _this.time = 2000;//停留的時(shí)間
        _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();
}

下面來(lái)說(shuō)說(shuō)下我封裝這個(gè)js的思路，因?yàn)閷懭魏纬绦?思路是最重要的，只要能想的清楚 代碼就一定能實(shí)現(xiàn)掉！思路說(shuō)的更好聽的話 就是我們常說(shuō)的“算法”！
1 function tabSlider(obj,count){} 用這個(gè)js來(lái)封裝后傳入?yún)?shù)！當(dāng)在HTML頁(yè)面上時(shí)直接調(diào)用tabSlider(obj,count)就可以了！
2 初始化一些參數(shù) 然后給這個(gè)函數(shù)自生自定義一個(gè)函數(shù)this.slider = function(){} 綁定個(gè)mouseover事件，初始化第一個(gè)li時(shí) 查找當(dāng)前的div內(nèi)容是否和當(dāng)前l(fā)i 指向同一個(gè)指針 如果相同 那塊內(nèi)容顯示！其他的隱藏！
3 自定義this.addHover這個(gè)事件  當(dāng)鼠標(biāo)移上時(shí)候抽發(fā)這個(gè)事件！
4 自定義自動(dòng)播放事件this.autoplay = function(){} 這個(gè)里面用了trigger這個(gè)觸發(fā)方法_this.n = _this.n >=(_this.count-1)? 0 : ++_this.n;
   $(_this.obj + " .menu li").eq(_this.n).trigger("mouseover");
5 最后用個(gè)函數(shù) 來(lái)渲染上面的函數(shù) 調(diào)用上面的函數(shù)
復(fù)制代碼 代碼如下:

this.factory = function(){
   this.slider();
   this.addhover();
   t = setInterval(this.autoplay,_this.time);
  }
  this.factory();

相關(guān)文章

最新評(píng)論