熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

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

2013-11-15 11:53:03  來源: JSP教程 

  今天我這邊網速真是太慢了打開一個網頁要等待很久但是還是想寫篇文章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
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.