轮播实现

一、轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()）

轮播的常见实现有两种：

1. 横向排列所有图片，父元素设置为绝对定位，通过设置left或者right来位移父元素达到图片切换效果（需要注意，该父元素的父元素宽度应为一张图片大小，并overflow: hidden）。
2. 所有图片绝对定位，这样实际上所有图片都重合在一个位置，然后控制对应图片显示，其他图片隐藏。

一般轮播的功能有：

1. 左右位移按钮
2. 中间的指定下标移动按钮
3. 自动轮播

因此我会未以上三个功能抽出来做逻辑运算，然后再加个move()函数，在每个功能里边调用。另外还有一些动画回调或其他小功能抽出做单独函数。如：

    /**
     * 新建一个轮播对象，所有方法基于 jQuery
     * @param {Object} options 
     *    {
     *      swiperNode: 轮播的父节点 jQ 对象（即将位移的对象）  ( 必填 )
     *      btnsNode: 轮播的按钮对象数组 jQ 对象   （ 必填 ）
     *      speed: 轮播速度，单位 ms 。默认 500
     *      distance: 每张图片的宽度，也就是每次位移的最小距离，单位 px 。默认 960 px
     *      currentIndex: 当前轮播图位置
     *      activeClass: 激活的样式，默认 active
     *      auto: 是否开启自动轮播， Boolean 类型， 默认 false
     *      interval: 自动轮播间隔，单位 ms ，默认 2000 。
     *    }
     */
    function _swiper(options) {
      this.swiperNode = options.swiperNode
      this.btnsNode = options.btnsNode
      this.speed = options.speed || 500
      this.distance = options.distance || 960
      this.currentIndex = options.currentIndex || 0
      this.activeClass = options.activeClass || 'active'
      this.auto = options.auto || false
      this.interval = options.interval || 2000
      this.start = 0
      this.end = Math.floor((this.swiperNode).innerWidth() / this.distance) - 1
    }

    /**
     * 初始化，激活轮播
     */
    _swiper.prototype.init = function () {
      this.currentMode(this.currentIndex)
      this._judgeAuto()
    }

    /**
     * 计算模式，用于左右位移
     * @param {Number} offset { -1 / 1  => 控制轮播位移方向}
     */
    _swiper.prototype.calculateMode = function (offset) {
      this._optimizedAutoMode()
      this.currentIndex += offset
      if (this.currentIndex < 0) {
        this.swiperNode.css('left', -this.distance * this.end + 'px')
        this.currentIndex = this.end - 1
      } else if (this.currentIndex > this.end) {
        this.swiperNode.css('left', this.start + 'px')
        this.currentIndex = this.start + 1
      }
      this._move()
      this._judgeAuto()
    }

    /**
     * 按钮模式，根据按钮的索引位移图片
     * @param {Number} index {按钮的索引}
     */
    _swiper.prototype.currentMode = function (index) {
      this._optimizedAutoMode()
      this.currentIndex = index
      this._move()
      this._judgeAuto()
    }

    /**
     * 判断自动模式是否开启
     */
    _swiper.prototype._judgeAuto = function () {
      if (this.auto) {
        this._autoMode()
      }
    }

    /**
     * 自动模式函数，定时器模拟点击
     */
    _swiper.prototype._autoMode = function () {
      var self = this
      clearInterval(self.timer)
      self.timer = setInterval(function () {
        self.calculateMode(1)
      }, self.interval)
    }

    /**
     * 优化自动模式体验，手动时先清除自动模式
     */
    _swiper.prototype._optimizedAutoMode = function () {
      clearInterval(this.timer)
    }

    /**
     * 轮播对象的移动函数
     */
    _swiper.prototype._move = function () {
      this.swiperNode.stop().animate({
        left: -this.distance * this.currentIndex + 'px'
      }, this.speed, this._animateCallBack.call(this))
    }

    /**
     * 轮播动画的回调函数，用于同步按钮显示
     */
    _swiper.prototype._animateCallBack = function () {
      var fakeIndex = this.currentIndex
      var len = this.btnsNode.length
      if (fakeIndex >= len) {
        fakeIndex = 0
      }
      this.btnsNode.removeClass(this.activeClass)
      $(this.btnsNode[fakeIndex]).addClass(this.activeClass)
    }

二、实现左右滚动无限循环轮播效果

三、实现一个渐变轮播效果

在线预览 | GitHub