实现一个3D图片轮播插件 —— 更新版
来源:互联网 发布:adobe cs6 mac 百度云 编辑:程序博客网 时间:2024/05/01 22:07
前言:
前段时间写下了之前那篇 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:
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')循环到下一个项目。
结束语
刚才在爱脚本网,发现了自己的这篇博文,因此重新附下此句版权声明
版权声明:本文为博主原创文章,未经博主允许不得转载。
- 实现一个3D图片轮播插件 —— 更新版
- 实现一个3D图片轮播插件 —— 更新版
- 实现一个3D图片轮播插件 —— 更新版
- 实现一个3D图片轮播插件 —— 更新版
- 实现一个3D图片轮播插件 —— 更新版
- 3D图片轮播实现
- jQuery 3D旋转图片轮播插件imageflow.js
- 3D视频轮播插件——web前端
- 3D图片轮播
- 3D图片轮播
- 3d图片轮播--原理到实现
- 一个图片轮播插件---Nivo Slider
- js 实现一个简单的3D轮播效果
- myFocus插件实现图片轮播
- 使用js插件实现图片轮播
- 图片轮播插件
- 图片轮播插件
- JQuery插件开发初探——图片轮播
- ASCII码排序
- R语言--数据集合并、数据增减、不等长合并
- window.setTimeout() 和window.setInterval() 的区别
- 118. Pascal's Triangle
- 异常java.lang.SecurityException: You need MANAGE_USERS permission to……
- 实现一个3D图片轮播插件 —— 更新版
- 关于JS中作用域的销毁和不销毁的情况总结
- 2008、2012、2013海康威视嵌入式校招笔试整理
- 【HPU-OJ】Divide the pears(数学,思维)
- matlab向表单文件(xls文件)写入数据
- Javascript V8 引擎
- java基础之Socket通信
- C学习笔记
- rails中如何使用sorcery这个gem来实现用户的管理