前言：
前段时间写下了之前那篇 3D图片轮播效果，后来发现了 写的 ，于是重新修改了自己的这个图片轮播，使之可以成为一个插件来使用。
基于jquery.gallery.js 添加了 自适应图片数量，以及添加了 swipe-indicators 切换按钮
源代码：
demo:
具体使用：
html结构：
通过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')循环到下一个项目。
结束语
刚才在爱脚本网，发现了自己的这篇博文，因此重新附下此句版权声明
版权声明：本文为原创文章，未经博主允许不得转载。