实现一个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')

循环到下一个项目。

结束语

巴特西

实现一个3D图片轮播插件 —— 更新版

最新文章

热门文章