jQuery图片轮播实现并封装(一)

<div class="banner" id="J_bg_ban">　　<ul>　　　　<li><a href="#"><img src="banner_04.jpg" alt="广告图 /></a></li>　　　　<li><a href="#"><img src="banner_04.jpg" alt="广告图 /></a></li>　　　　<li><a href="#"><img src="banner_03.jpg" alt="广告图"/></a></li>　　　　<li><a href="#"><img src="banner_04.jpg" alt="广告图"/></a></li>　　　　<li><a href="#"><img src="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></div> 

.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;}

$.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');})

 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');