首页 > 代码库 > jQuery图片轮播（一）轮播实现并封装
jQuery图片轮播（一）轮播实现并封装
利用面向对象自己动手写了一个封装好的jquery轮播对象，可满足一般需求，需要使用时只需调用此对象的轮播方法即可。
demo：https://github.com/zsqosos/shopweb
具体代码如下：
HTML结构：
1 <div class="banner" id="J_bg_ban"> 2 <ul> 3 <li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/banner_04.jpg" alt="广告图 /></a></li> 4 <li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/banner_04.jpg" alt="广告图 /></a></li> 5 <li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/banner_03.jpg" alt="广告图"/></a></li> 6 <li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/banner_04.jpg" alt="广告图"/></a></li> 7 <li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/banner_05.jpg" alt="广告图"/></a></li> 8 </ul> 9 <div class="indicator" id="J_bg_indicator"> 10 </div> 11 <div class="ban-btn clearfloat" id="J_bg_btn"> 12 <a class="next-btn fr" href="javascript:">></a><a class="prev-btn fl" href="javascript:"><</a> 13 </div> 14 </div>
css样式：
.banner {
height: 325px;
width: 812px;
position: relative;
overflow: hidden;
}
.banner ul li{
position: absolute;
top: 0;
left: 0;
}
.banner ul li img{
height: 325px;
width: 812px;
display: block;
}
.ban-btn{
width: 100%;
position: absolute;
top: 136px;
z-index: 2;
}
.ban-btn a{
display: inline-block;
height: 60px;
width: 35px;
background: rgba(180,180,180,0.5);
font-size: 25px;
text-align: center;
line-height: 60px;
color: #fff;
}
.ban-btn a:hover{
background: rgba(100,100,100,0.5);
}
.indicator{
width: 100%;
position: absolute;
text-align: center;
bottom: 15px;
z-index: 2;
}
.indicator a{
display: inline-block;
width: 20px;
height: 5px;
margin:0 3px;
background: #fff;
}
.indicator-active{
background: #FF8C00!important;
}
jquery代码：
$.carousel = {
now : 0, //当前显示的图片索引
hasStarted : false, //是否开始轮播
interval : null, //定时器
liItems : null, //要轮播的li元素集合
len : 0, //liItems的长度
aBox : null, //包含指示器的dom对象
bBox : null, //包含前后按钮的dom对象
/**
* 初始化及控制函数
* @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 += ‘<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()
},
//前一张函数
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);
},
/**
* 播放函数
* @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对象来解决这个问题，如：
var banner1 = $.extend(true,{},carousel);
var banner2 = $.extend(true,{},carousel);
var banner3 = $.extend(true,{},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‘);
这样虽然可以满足需求，但每次调用都会复制出一个新的对象，不仅影响性能，carsouel对象内的方法还不能够重用，所以还需要进一步改进。
要想让多个轮播件可以同时使用carsouel对象，并且可以复用carsouel对象内部的函数，必须将carsouel对象作为一个构造函数或原型对象，每次需要使用时在进行实例化操作，这样可满足多个轮播件同时使用的需求，同时做到最大化的函数复用。我会在后续的文章中解决这个问题，欢迎关注或提出指导。
jQuery图片轮播（一）轮播实现并封装
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。