Jquery封裝tab自動轉場效果的具體實現

最後更新：2013-10-22 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

今天我這邊網速真是太慢了，開啟一個網頁要等待很久，但是還是想寫篇文章----tab自動切換因為工作中經常會碰到這樣的問題所以寫部落格也是總結下最重要的是能分享下及以後碰到類似的可以參考下！當然這是我用Jquery來封裝的頁面可以調用多次調用方式                new tabSlider(obj,count); obj指容器最外層ID,count指有多個li 當然要引用我這個js的話一定要按照我結構來寫！下面的是我的HTML一些結構如下：
複製代碼代碼如下:
<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>

結構是這樣的！下面是我頁面上的HTML/CSS的代碼！
複製代碼代碼如下:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</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代碼如下：
複製代碼代碼如下:
// JavaScript Document
    /*
    *@date 2011 10 24
    *@ author tugenhua
    *@ email tugenhua@126.com
    *@ 可以一個頁面多次引用
    依賴的結構 */
    <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>
/*頁面引用的方式
    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();

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Jquery封裝tab自動轉場效果的具體實現

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support