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

当我们需要创建多个相似对象时，可以使用面向对象编程的方式来避免重复的代码编写。在jQuery图片轮播的案例中，我们可以通过利用构造函数和原型来创建对象以实现继承。

利用构造函数和原型创建对象

首先，我们可以使用构造函数创建一个基础的轮播对象Carousel，如下所示：

function Carousel(container, list) {
  this.container = container;
  this.list = list;
  this.imgs = this.list.children('li');
  this.imgWidth = this.imgs.first().width();
  this.imgsCount = this.imgs.length;
  this.current = 0;
}

该构造函数有5个属性，包括轮播容器container、图片列表list、所有图片imgs、每张图片的宽度imgWidth以及图片数量imgsCount，还有一个初始的当前展示图片索引current。

接下来，可以使用原型prototype来给Carousel添加一些方法，包括使用animate方法来实现图片轮播效果，以及使用setInterval方法来实现自动轮播效果。例如：

Carousel.prototype = {
  animate: function(offset) {
    var left = this.list.position().left;
    var newLeft = left - offset;
    this.list.animate({left: newLeft}, 500);
  },

  play: function() {
    var _this = this;
    this.timer = setInterval(function() {
      _this.current++;
      if (_this.current === _this.imgsCount) {
        _this.current = 0;
      }
      _this.animate(-_this.imgWidth);
    }, 2000);
  }
}

该原型包含两个方法animate和play。animate方法将图片列表向左滑动offset个像素，play方法则用setInterval实现轮播。每隔2秒自动播放下一张图，即每次将current加1，判断current是否超过imgsCount，如果是则将其置为0，再调用animate方法将图片向左滑动imgWidth个像素。

实现继承

接下来，我们可以使用原型继承的方式来创建不同类型的轮播对象，例如垂直滚动轮播对象VerticalCarousel和渐变轮播对象GradualCarousel。

示例1：垂直滚动轮播对象

我们可以使用垂直滚动样式实现VerticalCarousel对象的构造函数，继承自Carousel对象，并重写animate和play方法：

function VerticalCarousel(container, list) {
  Carousel.call(this, container, list);
}

VerticalCarousel.prototype = new Carousel();
VerticalCarousel.prototype.animate = function(offset) {
  var top = this.list.position().top;
  var newTop = top - offset;
  this.list.animate({top: newTop}, 500);
}

VerticalCarousel.prototype.play = function() {
  var _this = this;
  this.timer = setInterval(function() {
    _this.current++;
    if (_this.current === _this.imgsCount) {
      _this.current = 0;
    }
    _this.animate(-_this.imgWidth);
  }, 2000);
}

这里我们使用了call方法来继承Carousel对象，并重写原型中的animate和play方法，将轮播方向从水平滑动改为了垂直滚动。

示例2：渐变轮播对象

我们可以使用渐变样式实现GradualCarousel对象的构造函数，继承自Carousel对象，并添加fadeIn和fadeOut方法：

function GradualCarousel(container, list) {
  Carousel.call(this, container, list);
}

GradualCarousel.prototype = new Carousel();
GradualCarousel.prototype.fadeIn = function() {
  var img = this.imgs.eq(this.current);
  img.css('z-index', 2);
  img.fadeIn(1000, function() {
    $(this).css('z-index', 0);
  });
}

GradualCarousel.prototype.fadeOut = function() {
  var img = this.imgs.eq(this.current);
  img.css('z-index', 1);
  img.fadeOut(1000);
}

GradualCarousel.prototype.play = function() {
  var _this = this;
  this.timer = setInterval(function() {
    _this.current++;
    if (_this.current === _this.imgsCount) {
      _this.current = 0;
    }
    _this.fadeOut();
    _this.fadeIn();
  }, 2000);
}

该对象仍然继承自Carousel，但是添加了fadeIn和fadeOut方法。其中fadeIn方法将当前展示图片淡出，将z-index属性设置为2，然后将下一张图片淡入展示，展示结束后将z-index属性设置为0。fadeOut方法则将当前展示图片淡出，将z-index属性设置为1。play方法则循环调用fadeIn和fadeOut方法。