jQuery图片轮播（二）利用构造函数和原型创建对象以实现继承
2016-12-06 08:48
831 查看
上一篇文中完成的封装，还存在一个小问题，就是该轮播对象不能在同一页面中重复使用，本文将通过组合使用javascript的构造函数和原型模式创建对象来解决这个问题。
没有看过上一篇文章的朋友可以点此查看上一篇文章 (jQuery图片轮播实现并封装(一))
首先回顾一下，上文的问题所在，上文中的carsouel对象是采用字面量的方式来定义的，这样carsouel本就是一个实例，想要使用在多处时，这个对象的方法会发生冲突，最终只会执行最后的那一个。而通过采用构造函数的方式来定义对象carsouel，每次需要使用时只需要用new操作符来实例化一个新对象，页面中需要几处轮播就实例化几个对象，这样就可以满足需求。所以，将代码改成以下形式。
function Carousel(){
this.now = 0; //当前显示的图片索引
this.hasStarted = false； //是否开始轮播
this.interval = null； //定时器
this.liItems = null； //要轮播的li元素集合
this.len = 0; //liItems的长度
this.aBox : null; //包含指示器的dom对象
this.bBox : null; //包含前后按钮的dom对象
/**
* 初始化及控制函数
* @param bannnerBox string 包含整个轮播图盒子的id或class
* @param aBox string 包含指示器的盒子的id或class
* @param btnBox string 包含前后按钮的盒子的id或class
*/
this.startPlay = function(bannnerBox,aBox,btnBox) {
//初始化对象参数
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);
//让第一张图片显示，根据轮播图数量动态创建指示器，并让第一个指示器处于激活状态，隐藏前后按钮
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();
//鼠标移入banner图时，停止轮播并显示前后按钮，移出时开始轮播并隐藏前后按钮
$(bannnerBox).hover(function (){
that.stop();
that.bBox.fadeIn(200);
}, function (){
that.start();
that.bBox.fadeOut(200);
});
//鼠标移入指示器时，显示对应图片，移出时继续播放
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()
};
//前一张函数
this.prev = function (){
var out = this.now;
this.now = (--this.now + this.len) % this.len;
this.play(out, this.now);
};
//后一张函数
this.next = function (){
var out = this.now;
this.now = ++this.now % this.len;
this.play(out, this.now);
};
/**
* 播放函数
* @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');
};
//开始函数
this.start = function(){
if(!this.hasStarted) {
this.hasStarted = true;
var that = this;
this.interval = setInterval(function(){
that.next();
},2000);
}
};
//停止函数
this.stop = function (){
clearInterval(this.interval);
this.hasStarted = false;
}
};
调用时采用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');
上述方法可实现需求，但是仔细分析发现，这与上一篇文中使用extend复制对象的方法几乎是一样的，这里的new操作符实际上也是将构造函数完全复制了一份出来作为一个新的对象，那就和上文中提到的方法存在共同的缺点，那就是内部函数不能复用，每次执行用new操作符来实例化，都会创建新的内部函数，这也是单独使用构造函数来自定义对象的缺点。
在Carousel对象内的next函数，prev函数，strat函数，stop函数其实都是可以共用的，多个轮播件共用这些函数是完全没有问题的，而初始化函数和play函数需要作为私有函数来调用。单独使用构造函数创建的对象，当使用new操作符创建新实例的时候，初始化方法和play方法会被重新在每个实例上创建一遍，这正是我们想要的结果，而next方法、prev方法、start方法、stop方法这些可共用的方法也会被重新创建，而创造多个完成一样任务的方法是完全没有必要的，所以需要将这些共有的方法提出来，让所有Carousel对象的实例都可以公用，这样就可以解决函数复用的问题。
通过将这些共用的方法写在Carousel的原型对象上，在创建Carousel新实例的时候就可以通过原型链来共享这些方法，这样这些公用函数也就得到了复用，代码如下：
function Carousel(){
this.now = 0; //当前显示的图片索引
this.hasStarted= false; //是否开始轮播
this.interval = null; //定时器
this.liItems = null; //要轮播的li元素集合
this.len = 0; //liItems的长度
this.aBox = null; //包含指示器的dom对象
this.bBox = null; //包含前后按钮的dom对象
/**
* 初始化及控制函数
* @param bannnerBox string 包含整个轮播图盒子的id或class
* @param aBox string 包含指示器的盒子的id或class
* @param btnBox string 包含前后按钮的盒子的id或class
*/
this.startPlay = function(bannnerBox,aBox,btnBox) {
//初始化对象参数
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);
//让第一张图片显示，根据轮播图数量动态创建指示器，并让第一个指示器处于激活状态，隐藏前后按钮
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();
//鼠标移入banner图时，停止轮播并显示前后按钮，移出时开始轮播并隐藏前后按钮
$(bannnerBox).hover(function (){
that.stop();
that.bBox.fadeIn(200);
}, function (){
that.start();
that.bBox.fadeOut(200);
});
//鼠标移入指示器时，显示对应图片，移出时继续播放
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()
};
/**
* 播放函数
* @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 = {
//前一张函数
prev : function (){
var out = this.now;
this.now = (--this.now + this.len) % this.len;
this.play(out,this.now)
},
//后一张函数
next : function (){
var out = this.now;
this.now = ++this.now % this.len;
this.play(out,this.now);
},
//开始函数
start : function(){
if(!this.hasStarted) {
this.hasStarted = true;
var that = this;
this.interval = setInterval(function(){
that.next();
},2000);
}
},
//停止函数
stop : function (){
clearInterval(this.interval);
this.hasStarted = false;
}
};
在这里用字面量重写了Carousel对象的原型对象，将next方法，perv方法，start方法和stop方法写进了Carousel的原型对象中，这样每次实例化的对象就可以共用这些方法。当然，实例化的方法也是使用new操作符。
这种组合使用构造函数和原型的模式，是创建自定义类型最常用的方法，至此我们就完成了这个简单轮播对象的封装。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，同时也希望多多支持脚本之家！
您可能感兴趣的文章:
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery轮播图（二）利用构造函数和原型创建对象以实现继承
- JavaScript2种构造函数创建对象的模式以及继承的实现
- 构造函数创建对象和Object.create（）实现继承
- JavaScript 中实现继承的方式（列举3种在前一章，我们曾经讲解过创建类的最好方式是用构造函数定义属性，用原型定义方法。）
- JavaScript构造函数+原型创建对象，原型链+借用构造函数模式继承父类练习
- 在立即执行函数内组合使用构造函数模式和原型模式创建对象，实现模块化开发（以daterangepicker.js为例）
- 算法-javascript自实现继承extend（单次继承原型对象和单次继承构造函数）
- 利用jquery实现图片轮播效果（可配置每张图片的停留时间）
- 超级详细 一听就会：利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)
- js创建对象的构造函数模式+原型模式和组合继承\Hybrid Pattern & combination inheritance
- JavaScript 利用原型和原型链实现对象继承
- JavaScript2种构造函数创建对象的模式以及继承的实现
- jQuery 实现图片轮播
- 利用C++的operator new实现同一对象多次调用构造函数
- 利用BitmapCutter实现截取图片功能之修改加强版，兼容Jquery1.4.x以上版本
- 利用反射调用带参数的构造函数创建对象
- Java程序员从笨鸟到菜鸟之（二十九）javascript对象的创建和继承实现
- Java程序员从笨鸟到菜鸟之（二十九）javascript对象的创建和继承实现
- 利用jquery的imgAreaSelect插件实现图片裁剪示例
- jquery实现图片轮播效果