jQuery轮播图（一）轮播实现并封装
利用面向对象自己动手写了一个封装好的jquery轮播组件，可满足一般需求，不仅使用简单且复用性高。
demo:点此预览 代码地址：https://github.com/zsqosos/component_library/tree/master/jquery-carousel
具体代码如下：
HTML：
<div class="banner" id="J_bg_ban"> <ul> <li><a href="#"><img src="./img/banner_01.jpg" alt="广告图"/></a></li> <li><a href="#"><img src="./img/banner_02.jpg" alt="广告图"/></a></li> <li><a href="#"><img src="./img/banner_03.jpg" alt="广告图"/></a></li> <li><a href="#"><img src="./img/banner_04.jpg" alt="广告图"/></a></li> <li><a href="#"><img src="./img/banner_05.jpg" alt="广告图"/></a></li> </ul> <div class="indicator" id="J_bg_indicator"> </div> <div class="ban-btn clearfloat" id="J_bg_btn"> <a class="next-btn fr" href="javascript:">></a><a class="prev-btn fl" href="javascript:"><</a> </div>
css：
.banner { height: 325px; width: 812px; position: relative; overflow: hidden; } .banner ul{ padding: 0; margin: 0; } .banner ul li{ top: 0; left: 0; list-style: none; position: absolute; } .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; text-decoration: none; } .next-btn{ float: right; } .prev-btn{ float: left; } .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; }
js：
$.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("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() }, //前一张函数 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('indicator-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(){
$.carousel.startPlay('#J_bg_ban','#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对象作为一个构造函数或原型对象，每次需要使用时在进行实例化操作，这样可满足多个轮播件同时使用的需求，同时做到最大化的函数复用。我会在后续的文章中解决这个问题，欢迎关注或提出指导。
