实现一个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>«</span></a>
<a href="#" class='next'><span>»</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')
循环到下一个项目。

 

 结束语

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

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