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