实现一个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')
循环到下一个项目。

 

 结束语

      刚才在爱脚本网，发现了自己的这篇博文，因此重新附下此句版权声明

　　版权声明：本文为博主原创文章，未经博主允许不得转载。