Jquery封裝tab自動切換效果的具體實現

　　今天我這邊網速真是太慢了打開一個網頁要等待很久但是還是想寫篇文章tab自動切換因為工作中經常會碰到這樣的問題所以寫博客也是總結下最重要的是能分享下及以後碰到類似的可以參考下！當然這是我用Jquery來封裝的頁面可以調用多次調用方式 new tabSlider(objcount); obj指容器最外層IDcount指有多個li 當然要引用我這個js的話一定要按照我結構來寫！下面的是我的HTML一些結構如下

復制代碼代碼如下:
<div id="tab">
    <ul class="menu">
        <li class="current">tab</li>
        <li>tab</li>
        <li>tab</li>
        <li class="lastcol">tab</li>
    </ul>
    <div class="contentmain">
        <div class="content">tab</div>
        <div class="content hide">tab</div>
        <div class="content hide">tab</div>
        <div class="content hide">tab</div>
    </div>
</div>

　　
結構是這樣的！下面是我頁面上的HTML/CSS的代碼！

復制代碼代碼如下:
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<title>無標題文檔</title>
<script type="text/javascript" src="
<style>
#tab{ width:px; height:px; overflow:hidden; border:px solid #;}
#tab{ width:px; height:px; overflow:hidden; border:px solid #;}
menu{ width:px; height:px; margin:; padding:;}
menu li{ float:left; liststyle:none; width:px; textalign:center; borderbottom:px solid #; borderright:px solid #; cursor:pointer;}
menu licurrent{ borderbottom:none;}
contentmain{ width:px; height:px; overflow:hidden;}
content{ width:px; height:px; overflow:hidden; display:block;}
hide{ display:none;width:px; height:px; overflow:hidden;}
menu lilastcol{ borderright:none; width:px;}
</style>
<script src="AutoTabjs"></script>
</head>
<body>
<div id="tab">
    <ul class="menu">
        <li class="current">tab</li>
        <li>tab</li>
        <li>tab</li>
        <li class="lastcol">tab</li>
    </ul>
    <div class="contentmain">
        <div class="content">tab</div>
        <div class="hide">tab</div>
        <div class="hide">tab</div>
        <div class="hide">tab</div>
    </div>
</div>
<br /><br />
<div id="tab">
    <ul class="menu">
        <li class="current">tab</li>
        <li>tab</li>
        <li>tab</li>
        <li class="lastcol">tab</li>
    </ul>
    <div class="contentmain">
        <div class="content">tab</div>
        <div class="hide">tab</div>
        <div class="hide">tab</div>
        <div class="hide">tab</div>
    </div>
</div>
<script>new tabSlider("#tab");</script>
<script>new tabSlider("#tab");</script>
</body>
</html>

　　
JS代碼如下

復制代碼代碼如下:
// JavaScript Document
    /*
    *@date
    *@ author tugenhua
    *@ email tugenhua@com
    *@ 可以一個頁面多次引用
    依賴的結構 */
    <div id="tab">
    <ul class="menu">
        <li class="current">tab</li>
        <li>tab</li>
        <li>tab</li>
        <li class="lastcol">tab</li>
    </ul>
    <div class="contentmain">
        <div class="content">tab</div>
        <div class="content hide">tab</div>
        <div class="content hide">tab</div>
        <div class="content hide">tab</div>
    </div>
</div>
/*頁面引用的方式
    new tabSlider("#tab");
    #tab 是外部ID 指一共有多少個li
*/
function tabSlider(objcount){
    var _this = this;
        _thisobj = obj;
        _thiscount = count;
        _thistime = ;//停留的時間
        _thisn = ;
        var t;
        thisslider = function(){
            $(_thisobj + " menu li")bind("mouseover"function(event){
                $(eventtarget)addClass("current")siblings()removeClass("current");
                var index = $(_thisobj + " menu li")index(this);
                $(_thisobj + " contentmain content")eq(index)show()siblings()hide();
                _thisn = index;
            })
        }
        thisaddhover = function(){
            $(_thisobj)hover(function(){clearInterval(t);}function(){t=setInterval(_thisautoplay_thistime)});
        }
        thisautoplay = function(){
            _thisn = _thisn >=(_thiscount)? : ++_thisn;
            $(_thisobj + " menu li")eq(_thisn)trigger("mouseover");
        }
        thisfactory = function(){
            thisslider();
            thisaddhover();
            t = setInterval(thisautoplay_thistime);
        }
        thisfactory();
}

　　
下面來說說下我封裝這個js的思路因為寫任何程序思路是最重要的只要能想的清楚代碼就一定能實現掉！思路說的更好聽的話就是我們常說的“算法”！
function tabSlider(objcount){} 用這個js來封裝後傳入參數！當在HTML頁面上時直接調用tabSlider(objcount)就可以了！
初始化一些參數然後給這個函數自生自定義一個函數thisslider = function(){} 綁定個mouseover事件初始化第一個li時查找當前的div內容是否和當前li 指向同一個指針如果相同那塊內容顯示！其他的隱藏！
自定義thisaddHover這個事件當鼠標移上時候抽發這個事件！
自定義自動播放事件thisautoplay = function(){} 這個裡面用了trigger這個觸發方法_thisn = _thisn >=(_thiscount)? : ++_thisn;
$(_thisobj + " menu li")eq(_thisn)trigger("mouseover");
最後用個函數來渲染上面的函數調用上面的函數

復制代碼代碼如下:

　　
thisfactory = function(){
   thisslider();
   thisaddhover();
   t = setInterval(thisautoplay_thistime);
}
thisfactory();

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19807.html