jQuery圖片輪播（二）利用構(gòu)造函數(shù)和原型創(chuàng)建對象以實現(xiàn)繼承
更新時間：2016年12月06日 08:48:56 作者：陌路黃昏后
本文主要介紹了利用構(gòu)造函數(shù)和原型創(chuàng)建對象以實現(xiàn)繼承，并附上完成簡單輪播對象的封裝的示例代碼。有興趣的朋友可以看下
上一篇文中完成的封裝，還存在一個小問題，就是該輪播對象不能在同一頁面中重復(fù)使用，本文將通過組合使用javascript的構(gòu)造函數(shù)和原型模式創(chuàng)建對象來解決這個問題。
沒有看過上一篇文章的朋友可以點此查看上一篇文章 (jQuery圖片輪播實現(xiàn)并封裝(一))
首先回顧一下，上文的問題所在，上文中的carsouel對象是采用字面量的方式來定義的，這樣carsouel本就是一個實例，想要使用在多處時，這個對象的方法會發(fā)生沖突，最終只會執(zhí)行最后的那一個。而通過采用構(gòu)造函數(shù)的方式來定義對象carsouel，每次需要使用時只需要用new操作符來實例化一個新對象，頁面中需要幾處輪播就實例化幾個對象，這樣就可以滿足需求。所以，將代碼改成以下形式。
function Carousel(){
this.now = 0; //當(dāng)前顯示的圖片索引
this.hasStarted = false； //是否開始輪播
this.interval = null； //定時器
this.liItems = null； //要輪播的li元素集合
this.len = 0; //liItems的長度
this.aBox : null; //包含指示器的dom對象
this.bBox : null; //包含前后按鈕的dom對象
/**
* 初始化及控制函數(shù)
* @param bannnerBox string 包含整個輪播圖盒子的id或class
* @param aBox string 包含指示器的盒子的id或class
* @param btnBox string 包含前后按鈕的盒子的id或class
*/
this.startPlay = function(bannnerBox,aBox,btnBox) {
//初始化對象參數(shù)
var that = this;
this.liItems = $(bannnerBox).find('ul').find('li');
this.len = this.liItems.length;
this.aBox = $(bannnerBox).find(aBox);
this.bBox = $(bannnerBox).find(btnBox);
//讓第一張圖片顯示，根據(jù)輪播圖數(shù)量動態(tài)創(chuàng)建指示器，并讓第一個指示器處于激活狀態(tài)，隱藏前后按鈕
this.liItems.first('li').css({'opacity': 1, 'z-index': 1}).siblings('li').css({'opacity': 0, 'z-index': 0});
var aDom = '';
for (var i = 0; i < this.len; i++){
aDom += '<a></a>';
}
$(aDom).appendTo(this.aBox);
this.aBox.find('a:first').addClass("indicator-active");
this.bBox.hide();
//鼠標(biāo)移入banner圖時，停止輪播并顯示前后按鈕，移出時開始輪播并隱藏前后按鈕
$(bannnerBox).hover(function (){
that.stop();
that.bBox.fadeIn(200);
}, function (){
that.start();
that.bBox.fadeOut(200);
});
//鼠標(biāo)移入指示器時，顯示對應(yīng)圖片，移出時繼續(xù)播放
this.aBox.find('a').hover(function (){
that.stop();
var out = that.aBox.find('a').filter('.indicator-active').index();
that.now = $(this).index();
if(out!=that.now) {
that.play(out, that.now)
}
}, function (){
that.start();
});
//點擊左右按鈕時顯示上一張或下一張
$(btnBox).find('a:first').click(function(){that.next()});
$(btnBox).find('a:last').click(function(){that.prev()});
//開始輪播
this.start()
};
//前一張函數(shù)
this.prev = function (){
var out = this.now;
this.now = (--this.now + this.len) % this.len;
this.play(out, this.now);
};
//后一張函數(shù)
this.next = function (){
var out = this.now;
this.now = ++this.now % this.len;
this.play(out, this.now);
};
/**
* 播放函數(shù)
* @param out number 要消失的圖片的索引值
* @param now number 接下來要輪播的圖的索引值
*/
this.play = function (out, now){
this.liItems.eq(out).stop().animate({opacity:0,'z-index':0},500).end().eq(now).stop().animate({opacity:1,'z-index':1},500);
this.aBox.find('a').removeClass('imgnum-active').eq(now).addClass('indicator-active');
};
//開始函數(shù)
this.start = function(){
if(!this.hasStarted) {
this.hasStarted = true;
var that = this;
this.interval = setInterval(function(){
that.next();
},2000);
}
};
//停止函數(shù)
this.stop = function (){
clearInterval(this.interval);
this.hasStarted = false;
}
};
調(diào)用時采用new操作符，如下：
var banner1 = new Carousel();
var banner2 = new Carousel();
var banner3 = new carousel();
banner1.startPlay('#J_bg_ban1','#J_bg_indicator1','#J_bg_btn1');
banner2.startPlay('#J_bg_ban2','#J_sm_indicator2','#J_bg_btn2');
banner3.startPlay('#J_bg_ban3','#J_sm_indicator3','#J_bg_btn3');
上述方法可實現(xiàn)需求，但是仔細(xì)分析發(fā)現(xiàn)，這與上一篇文中使用extend復(fù)制對象的方法幾乎是一樣的，這里的new操作符實際上也是將構(gòu)造函數(shù)完全復(fù)制了一份出來作為一個新的對象，那就和上文中提到的方法存在共同的缺點，那就是內(nèi)部函數(shù)不能復(fù)用，每次執(zhí)行用new操作符來實例化，都會創(chuàng)建新的內(nèi)部函數(shù)，這也是單獨使用構(gòu)造函數(shù)來自定義對象的缺點。
在Carousel對象內(nèi)的next函數(shù)，prev函數(shù)，strat函數(shù)，stop函數(shù)其實都是可以共用的，多個輪播件共用這些函數(shù)是完全沒有問題的，而初始化函數(shù)和play函數(shù)需要作為私有函數(shù)來調(diào)用。單獨使用構(gòu)造函數(shù)創(chuàng)建的對象，當(dāng)使用new操作符創(chuàng)建新實例的時候，初始化方法和play方法會被重新在每個實例上創(chuàng)建一遍，這正是我們想要的結(jié)果，而next方法、prev方法、start方法、stop方法這些可共用的方法也會被重新創(chuàng)建，而創(chuàng)造多個完成一樣任務(wù)的方法是完全沒有必要的，所以需要將這些共有的方法提出來，讓所有Carousel對象的實例都可以公用，這樣就可以解決函數(shù)復(fù)用的問題。
通過將這些共用的方法寫在Carousel的原型對象上，在創(chuàng)建Carousel新實例的時候就可以通過原型鏈來共享這些方法，這樣這些公用函數(shù)也就得到了復(fù)用，代碼如下：
function Carousel(){
this.now = 0; //當(dāng)前顯示的圖片索引
this.hasStarted= false; //是否開始輪播
this.interval = null; //定時器
this.liItems = null; //要輪播的li元素集合
this.len = 0; //liItems的長度
this.aBox = null; //包含指示器的dom對象
this.bBox = null; //包含前后按鈕的dom對象
/**
* 初始化及控制函數(shù)
* @param bannnerBox string 包含整個輪播圖盒子的id或class
* @param aBox string 包含指示器的盒子的id或class
* @param btnBox string 包含前后按鈕的盒子的id或class
*/
this.startPlay = function(bannnerBox,aBox,btnBox) {
//初始化對象參數(shù)
var that = this;
this.liItems = $(bannnerBox).find('ul').find('li');
this.len = this.liItems.length;
this.aBox = $(bannnerBox).find(aBox);
this.bBox = $(bannnerBox).find(btnBox);
//讓第一張圖片顯示，根據(jù)輪播圖數(shù)量動態(tài)創(chuàng)建指示器，并讓第一個指示器處于激活狀態(tài)，隱藏前后按鈕
this.liItems.first('li').css({'opacity': 1, 'z-index': 1}).siblings('li').css({'opacity': 0, 'z-index': 0});
var aDom = '';
for (var i = 0; i < this.len; i++){
aDom += '<a></a>';
}
$(aDom).appendTo(this.aBox);
this.aBox.find('a:first').addClass("imgnum-active");
this.bBox.hide();
//鼠標(biāo)移入banner圖時，停止輪播并顯示前后按鈕，移出時開始輪播并隱藏前后按鈕
$(bannnerBox).hover(function (){
that.stop();
that.bBox.fadeIn(200);
}, function (){
that.start();
that.bBox.fadeOut(200);
});
//鼠標(biāo)移入指示器時，顯示對應(yīng)圖片，移出時繼續(xù)播放
this.aBox.find('a').hover(function (){
that.stop();
var out = that.aBox.find('a').filter('.indicator-active').index();
that.now = $(this).index();
if(out!=that.now) {
that.play(out,that.now)
}
}, function (){
that.start();
});
//點擊左右按鈕時顯示上一張或下一張
$(btnBox).find('a:first').click(function(){that.next()});
$(btnBox).find('a:last').click(function(){that.prev()});
//開始輪播
this.start()
};
/**
* 播放函數(shù)
* @param out number 要消失的圖片的索引值
* @param now number 接下來要輪播的圖的索引值
*/
this.play = function (out,now){
this.liItems.eq(out).stop().animate({opacity:0,'z-index':0},500).end().eq(now).stop().animate({opacity:1,'z-index':1},500);
this.aBox.find('a').removeClass('imgnum-active').eq(now).addClass('indicator-active');
};
}
Carousel.prototype = {
//前一張函數(shù)
prev : function (){
var out = this.now;
this.now = (--this.now + this.len) % this.len;
this.play(out,this.now)
},
//后一張函數(shù)
next : function (){
var out = this.now;
this.now = ++this.now % this.len;
this.play(out,this.now);
},
//開始函數(shù)
start : function(){
if(!this.hasStarted) {
this.hasStarted = true;
var that = this;
this.interval = setInterval(function(){
that.next();
},2000);
}
},
//停止函數(shù)
stop : function (){
clearInterval(this.interval);
this.hasStarted = false;
}
};
在這里用字面量重寫了Carousel對象的原型對象，將next方法，perv方法，start方法和stop方法寫進(jìn)了Carousel的原型對象中，這樣每次實例化的對象就可以共用這些方法。當(dāng)然，實例化的方法也是使用new操作符。
這種組合使用構(gòu)造函數(shù)和原型的模式，是創(chuàng)建自定義類型最常用的方法，至此我們就完成了這個簡單輪播對象的封裝。
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，同時也希望多多支持腳本之家！
您可能感興趣的文章:
- jQuery圖片輪播實現(xiàn)并封裝(一)
- jQuery實現(xiàn)的圖片輪播效果完整示例
- jQuery的圖片輪播插件PgwSlideshow使用詳解
- jQuery插件實現(xiàn)圖片輪播特效
- jQuery圖片輪播插件——前端開發(fā)必看
- 使用jQuery制作基礎(chǔ)的Web圖片輪播效果
- 非常棒的jQuery圖片輪播效果
- 簡單的jQuery banner圖片輪播實例代碼
- 基于JQuery實現(xiàn)圖片輪播效果(焦點圖)
- jQuery插件實現(xiàn)帶圓點的焦點圖片輪播切換
- jQuery動畫效果圖片輪播特效
- 基于jQuery實現(xiàn)左右圖片輪播（原理通用）
- jQuery手動點擊實現(xiàn)圖片輪播特效
相關(guān)文章
jquery實現(xiàn)類似EasyUI的頁面布局可改變左右的寬度
這篇文章主要介紹了通過jquery實現(xiàn)類似EasyUI的頁面布局可改變左右的寬度,需要的朋友可以參考下2014-07-07
這篇文章主要介紹了jquery更改元素屬性attr()方法,結(jié)合實例形式簡單分析了jquery更改元素屬性attr()方法基本功能、語法及相關(guān)使用技巧,需要的朋友可以參考下2020-05-05
jquery實現(xiàn)標(biāo)簽支持圖文排列帶上下箭頭按鈕的選項卡
這篇文章主要介紹了jquery實現(xiàn)標(biāo)簽支持圖文排列帶上下箭頭按鈕的選項卡的特效，效果十分不錯，而且非常實用，有需要的小伙伴參考下吧。2015-03-03
javascript基于jQuery的表格懸停變色/恢復(fù),表格點擊變色/恢復(fù),點擊行選Checkbox
jQuery的表格懸停變色 恢復(fù),表格點擊變色/恢復(fù),點擊行選Checkbox2008-08-08
jquery動態(tài)加載圖片數(shù)據(jù)練習(xí)代碼
這里我只是隨便做了下，上面是照片列表和兩個按鈕，單擊小圖片下面顯示大圖片，當(dāng)點擊按鈕時可以查看下一頁，上一頁的圖片。2011-08-08
這篇文章主要為大家詳細(xì)介紹了jQuery對table表格進(jìn)行增刪改查操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
本篇文章主要是對Json序列化和反序列化方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)驗證用戶登錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
jQuery+CSS實現(xiàn)滑動的標(biāo)簽分欄切換效果
這篇文章主要介紹了jQuery實現(xiàn)滑動的標(biāo)簽分欄切換效果，具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12
這篇文章主要分為以下知識：什么是Callbacks、Callbacks模型、基本模塊實現(xiàn)、once和auto(memory)、源碼和源碼下載，十分的細(xì)致全面，這里推薦給大家，有需要的小伙伴參考下吧。2015-03-03