jQuery图片轮播（二）利用构造函数和原型创建对
网络编程 2021-07-04 19:19www.168986.cn编程入门
本文主要介绍了利用构造函数和原型创建对象以实现继承，并附上完成简单轮播对象的封装的示例代码。有兴趣的朋友可以看下
上一篇文中完成的封装，还存在一个小问题，就是该轮播对象不能在同一页面中重复使用，本文将通过组合使用javascript的构造函数和原型模式创建对象来解决这个问题。
没有看过上一篇文章的朋友可以点此查看上一篇文章
回顾一下，上文的问题所在，上文中的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.s();
that.bBox.fadeIn(200);
}, function (){
that.start();
that.bBox.fadeOut(200);
});
//鼠标移入指示器时，显示对应图片，移出时继续播放
this.aBox.find('a').hover(function (){
that.s();
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).s().animate({opacity:0,'z-index':0},500).end().eq(now).s().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.s = 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函数，s函数其实都是可以共用的，多个轮播件共用这些函数是完全没有问题的，而初始化函数和play函数需要作为私有函数来调用。单独使用构造函数创建的对象，当使用new操作符创建新实例的时候，初始化方法和play方法会被重新在每个实例上创建一遍，这正是我们想要的结果，而next方法、prev方法、start方法、s方法这些可共用的方法也会被重新创建，而创造多个完成一样任务的方法是完全没有必要的，所以需要将这些共有的方法提出来，让所有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.s();
that.bBox.fadeIn(200);
}, function (){
that.start();
that.bBox.fadeOut(200);
});
//鼠标移入指示器时，显示对应图片，移出时继续播放
this.aBox.find('a').hover(function (){
that.s();
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).s().animate({opacity:0,'z-index':0},500).end().eq(now).s().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);
}
},
//停止函数
s : function (){
clearInterval(this.interval);
this.hasStarted = false;
}
};
在这里用字面量重写了Carousel对象的原型对象，将next方法，perv方法，start方法和s方法写进了Carousel的原型对象中，这样每次实例化的对象就可以共用这些方法。，实例化的方法也是使用new操作符。
这种组合使用构造函数和原型的模式，是创建自定义类型最常用的方法，至此我们就完成了这个简单轮播对象的封装。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，也希望多多支持狼蚁SEO！
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程：电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示：编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程