Jquery封裝tab自動切換效果的具體實現(xiàn)
更新時間：2013年07月13日 14:12:33 作者：
這篇文章介紹了Jquery封裝tab自動切換效果的具體實現(xiàn)方法，有需要的朋友可以參考一下
今天我這邊網(wǎng)速真是太慢了，打開一個網(wǎng)頁要等待很久，但是還是想寫篇文章----tab自動切換 因為工作中經(jīng)常會碰到這樣的問題 所以寫博客也是總結(jié)下 最重要的是能分享下 及以后碰到類似的可以參考下！ 當然這是我用Jquery來封裝的 頁面可以調(diào)用多次 調(diào)用方式 new tabSlider(obj,count); obj指容器最外層ID,count指有多個li 當然要引用我這個js的話 一定要按照我結(jié)構(gòu)來寫！下面的是我的HTML一些結(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>
結(jié)構(gòu)是這樣的！下面是我頁面上的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
*@ 可以一個頁面多次引用
依賴的結(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>
/*頁面引用的方式
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的思路，因為寫任何程序 思路是最重要的，只要能想的清楚 代碼就一定能實現(xiàn)掉！思路說的更好聽的話 就是我們常說的“算法”！
1 function tabSlider(obj,count){} 用這個js來封裝后傳入?yún)?shù)！當在HTML頁面上時直接調(diào)用tabSlider(obj,count)就可以了！
2 初始化一些參數(shù) 然后給這個函數(shù)自生自定義一個函數(shù)this.slider = function(){} 綁定個mouseover事件，初始化第一個li時 查找當前的div內(nèi)容是否和當前l(fā)i 指向同一個指針 如果相同 那塊內(nèi)容顯示！其他的隱藏！
3 自定義this.addHover這個事件 當鼠標移上時候抽發(fā)這個事件！
4 自定義自動播放事件this.autoplay = function(){} 這個里面用了trigger這個觸發(fā)方法_this.n = _this.n >=(_this.count-1)? 0 : ++_this.n;
$(_this.obj + " .menu li").eq(_this.n).trigger("mouseover");
5 最后用個函數(shù) 來渲染上面的函數(shù) 調(diào)用上面的函數(shù)
this.factory = function(){
this.slider();
this.addhover();
t = setInterval(this.autoplay,_this.time);
}
this.factory();
復制代碼 代碼如下:
<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)是這樣的！下面是我頁面上的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
*@ 可以一個頁面多次引用
依賴的結(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>
/*頁面引用的方式
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的思路，因為寫任何程序 思路是最重要的，只要能想的清楚 代碼就一定能實現(xiàn)掉！思路說的更好聽的話 就是我們常說的“算法”！
1 function tabSlider(obj,count){} 用這個js來封裝后傳入?yún)?shù)！當在HTML頁面上時直接調(diào)用tabSlider(obj,count)就可以了！
2 初始化一些參數(shù) 然后給這個函數(shù)自生自定義一個函數(shù)this.slider = function(){} 綁定個mouseover事件，初始化第一個li時 查找當前的div內(nèi)容是否和當前l(fā)i 指向同一個指針 如果相同 那塊內(nèi)容顯示！其他的隱藏！
3 自定義this.addHover這個事件 當鼠標移上時候抽發(fā)這個事件！
4 自定義自動播放事件this.autoplay = function(){} 這個里面用了trigger這個觸發(fā)方法_this.n = _this.n >=(_this.count-1)? 0 : ++_this.n;
$(_this.obj + " .menu li").eq(_this.n).trigger("mouseover");
5 最后用個函數(shù) 來渲染上面的函數(shù) 調(diào)用上面的函數(shù)
復制代碼 代碼如下:
this.factory = function(){
this.slider();
this.addhover();
t = setInterval(this.autoplay,_this.time);
}
this.factory();
相關(guān)文章
探討JQUERY JSON的反序列化類 using問題的解決方法
本篇文章是對JQUERY JSON的反序列化類 using問題的解決方法進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了jQuery實現(xiàn)的右下角廣告窗體跟隨效果,涉及jQuery結(jié)合時間函數(shù)動態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了jquery顯示隱藏input對象,需要的朋友可以參考下2014-07-07
寫用戶注冊驗證時遇到的jQuery選擇器問題，下面做下記錄，有遇到類似情況的朋友可以參考下2014-03-03
jQuery實現(xiàn)遍歷XML節(jié)點和屬性的方法示例
這篇文章主要介紹了jQuery實現(xiàn)遍歷XML節(jié)點和屬性的方法,涉及jQuery針對xml文件的加載、節(jié)點遍歷等相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
我們一般都是用HTML表格來顯示結(jié)構(gòu)化數(shù)據(jù)，如今有很多的 jQuery 表格插件可以幫助我們更好的組織和控制表格數(shù)據(jù)，增強表格的功能和操作。今天要與大家分享的是18個非常優(yōu)秀的 jQuery 表格插件，有用到朋友可以參考一下。2011-04-04
在使用PDFObject.js時，由于后臺需要轉(zhuǎn)換數(shù)據(jù)，在前臺顯示的時候，有很長一段時間顯示空白頁面，所以想到寫一個假的加載動畫，下面看下實現(xiàn)代碼2016-12-12
jQuery實現(xiàn)Select左右復制移動內(nèi)容
這篇文章主要介紹了基于jQuery實現(xiàn)Select左右復制移動內(nèi)容的實現(xiàn)方法，代碼非常簡單，具有參考借鑒價值，需要的朋友參考下2016-08-08
這篇文章主要介紹了jQuery自制提示框tooltip改進版，將tooltip內(nèi)容加上圖片預覽，感興趣的小伙伴們可以參考一下2016-08-08
Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可以讓網(wǎng)頁從別的域名（網(wǎng)站）那獲取資料，即跨域讀取數(shù)據(jù)，本文給大家簡單介紹jsonp 使用小結(jié) ，需要的朋友參考下2016-01-01