利用面向对象自己动手写了一个封装好的jquery轮播对象,可满足一般需求,需要使用时只需调用此对象的轮播方法即可。
具体代码如下:
HTML结构:
css样式:
jquery代码:
- 初始化及控制函数
- @param bannnerBox string 包含整个轮播图盒子的id或class
- @param aBox string 包含指示器的盒子的id或class
- @param btnBox string 包含前后按钮的盒子的id或class
*/
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 += '';
}
$(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()
},//前一张函数
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,/** - 播放函数
- @param out number 要消失的图片的索引值
- @param Now number 接下来要轮播的图的索引值
*/
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');
},//开始函数
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;
}
};
$(function(){
$.carsouel.startPlay('#J_bg_bn','#J_bg_indicator','#J_bg_btn');
})
最初实现时使用面向过程的方法来完成,虽然可以达到想要的效果,但代码复用性不高,需要为页面上每一个需要轮播的模块分别写对应的函数。进行封装后,不需要写太多的代码,使用时只需调用carsouel的startPlay方法并传入三个参数即可,大大提高了易用性。
但是,当前代码的缺陷也非常明显,就是当一个页面上同时有多个轮播件需要轮播时,只有最后一个会正常工作,这是由于carsouel对象只有一个,可以通过复制carsouel对象来解决这个问题,如:
这样虽然可以满足需求,但每次调用都会复制出一个新的对象,不仅影响性能,carsouel对象内的方法还不能够重用,所以还需要进一步改进。
要想让多个轮播件可以同时使用carsouel对象,并且可以复用carsouel对象内部的函数,必须将carsouel对象作为一个构造函数或原型对象,每次需要使用时在进行实例化操作,这样可满足多个轮播件同时使用的需求,同时做到最大化的函数复用。我会在后续的文章中解决这个问题,欢迎关注或提出指导。
我是一个javascript的初学者,这是我第一次发文,对于上述问题我会继续努力,寻求最好的解决方法。感谢你们看完。给自己说个加油吧。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。