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

来源：互联网发布：在线算法和离线算法编辑：程序博客网时间：2024/05/01 23:16

前言：

前段时间写下了之前那篇 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:

NameTypeDefaultintervalnumber　　3000autoplaybooleanfalsecurrentnumber0

初始化方法：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')循环到下一个项目。

结束语

0 0