實現一個3D圖片輪播插件 —— 更新版

前言：

    前段時間寫下了之前那篇 3D圖片輪播效果，后來發現了 Pedro Botelho 寫的 jquery.gallery.js ，於是重新修改了自己的這個圖片輪播，使之可以成為一個插件來使用。

基於jquery.gallery.js 添加了 自適應圖片數量，以及添加了 swipe-indicators 切換按鈕

 

源代碼：here

demo: here

具體使用：

 html結構：

    <div id="swipe">
        <div class="swipe-wrapper">
            <div class="swipe-list">
                <a href="#">
                    <img src="https://y.gtimg.cn/music/common/upload/t_focus_info_iphone/67011.jpg" alt="" class="swipe_list_pic">
                </a> 
            </div>
            <ol class='swipe-indicator'>
                <li data-index="0"></li>
                <li data-index="1"></li>
               <!-- .... -->
            </ol>
            <nav class="swipe-action">
                <a href="#" class="prev"><span>&laquo;</span></a>
                <a href="#" class='next'><span>&raquo;</span></a>
            </nav>
        </div>
    </div>

通過javascript使用

$("#swipe").Swipe()

選項 Options:

Name	Type	Default
interval	number	3000
autoplay	boolean	false
current	number	0

初始化方法 ：Swipe(options)

使用可選選項初始化輪播，然后開始循環播放項目。

$('#swipe').Swipe({
  interval: 2000,
  autoplay:true
})

原理分析：

  Swipe插件的幾個主要私有方法：

  _setItems():用於更新圖片位置，五個主要元素，按照先后順序分別為：this.$prevItem,this.$leftItem.this.$currentItem,this.$rightItem.this.$nextItem,顧名思義，大家很容易懂得

    // 更新圖片位置
    _setItems: function () {
      this.$items.removeClass('current');

      this.$currentItem = this.$items.eq(this.current)
        .addClass('current');
      this.$leftItem = (this.current === 0) ? this.$items.eq(this.itemsCount -
        1) : this.$items.eq(this.current - 1);

      this.$rightItem = (this.current === this.itemsCount - 1) ? this
        .$items
        .eq(0) : this.$items.eq(this.current + 1);

      //next & previous items
      if (this.itemsCount > 3) {
        // next item
        this.$nextItem = (this.$rightItem.index() === this.itemsCount -
            1) ?
          this.$items.eq(0) : this.$rightItem.next();

        // previous item
        this.$prevItem = (this.$leftItem.index() === 0) ? this.$items
          .eq(
            this.itemsCount - 1) : this.$leftItem.prev();
      }
    },

根據this.current找到這五個元素，其他元素通過 opacity:0; 進行隱藏。

 _layout():定義樣式 

    _layout: function () {
      // current, left and right items
      this._setItems();

      // current item is not changed
      // left and right one are rotated and translated
      this.$leftItem.css(this._getCoordinates('left'));
      this.$rightItem.css(this._getCoordinates('right'));
      this.$currentItem.css(this._getCoordinates('center'));

      this.$nextItem.css(this._getCoordinates('outright'));
      this.$prevItem
        .css(this._getCoordinates('outleft'));

      // 定義indicators樣式，當前索引 高亮背景
      this.$indicators.eq(this.current)
        .css('background', 'rgb(244, 67, 54)')
        .siblings()
        .css("background", "rgba(0, 0, 0, 0.2)");
    },

 _getCoordinates(position):接受一個position參數，獲取位置值，返回_layout()所需要的樣式；【可通過修改此處的樣式，自定義自己所需要的輪播效果】

　　具體看源代碼

_loadEvent():初始化綁定各種事件

_slide（dir）：接受一個滑動方向，用於圖片滑動。根據滑動方向，調整this.current的索引，然后調用this._layout()進行圖片位置更新和樣式變化

  _slide: function (dir) {
      if (this.isAnim)
        return false;
      this.isAnim = true;
      this.$items.addClass("swipe-transition");
      switch (dir) {
        case 'next':
          this.current = this.$rightItem.index();
          this._layout();
          break;
        case 'prev':
          this.current = this.$leftItem.index();
          this._layout();
          break;
      };
    }

_switchItems():主要是用於indicators的切換圖片

_cycle(): 定義一個定時器，用於圖片循環

_cycle: function () {
　 var _self = this;

　 this.$cycle = setTimeout(function () {
 　_self._slide('next');
 　if (_self.options.autoplay) {
      _self._cycle();
   }
 }, this.options.interval);
}

 

利用$.fn實現Swipe方法，看Jquery源碼便可知：$.fn=$.prototype

$.fn.Swipe = function (options) {
    if (options === undefined) options = {};
    if (typeof options === 'object') {
      this.each(function () {
        // jQuery.data( element, key, value )
        var instance = $.data(this, 'Swipe');
        if (!instance) {
          $.data(this, 'Swipe', new $.Swipe(options, this));
        }
      });
    } else {
      this.each(function () {
        var instance = $.data(this, 'Swipe');
        if (instance) {
          switch (options) {
            case 'cycle':
              instance._cycle();
              instance.options.autoplay = true;
              break;
            case 'stop':
              instance._stopCycle();
              instance.options.autoplay = false;
              break;
            case 'next':
              instance._slide('next');
              break;
            case 'prev':
              instance._slide('prev');
              break;
            default:
              logError("no such method '" + options +
                "' for Swipe instance");
              break;
          }
        } else {
          logError(
            "cannot call methods on Swipe prior to initialization; " +
            "attempted to call method '" + options + "'");
          return;
        }
      });
    }
    return this;
  };

此處給jQuery對象添加了一個Swipe()方法，接受一個可選選項，通過  $("#id").Swipe();  可聲明一個Swipe輪播對象，當Swipe對象初始化成功后，即可通過傳入 string類型，調用API

// 可選方法
$("#id").Swipe('cycle')
循環通過旋轉木馬項目從左到右。

$("#id").Swipe('stop')
停止旋轉木馬循環播放項目。

$("#id").Swipe('prev')
循環到上一個項目。

$("#id").Swipe('next')
循環到下一個項目。

 

 結束語

      剛才在愛腳本網，發現了自己的這篇博文，因此重新附下此句版權聲明

　　版權聲明：本文為博主原創文章，未經博主允許不得轉載。