jQuery图片轮播（二）利用构造函数和原型创建对象以实现继承

上一篇文中完成的封装，还存在一个小问题，就是该轮播对象不能在同一页面中重复使用，本文将通过组合使用javascript的构造函数和原型模式创建对象来解决这个问题。

没有看过上一篇文章的朋友可以点此查看上一篇文章 (jQuery图片轮播实现并封装(一))

首先回顾一下，上文的问题所在，上文中的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.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()  };  //前一张函数  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).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');  };  //开始函数  this.start = function(){    if(!this.hasStarted) {      this.hasStarted = true;      var that = this;      this.interval = setInterval(function(){        that.next();      },2000);    }  };  //停止函数  this.stop = function (){    clearInterval(this.interval);    this.hasStarted = false;  }};