基于jQuery Circlr插件实现产品图片360度旋转


Posted in Javascript onSeptember 20, 2015

基于jQuery Circlr插件实现产品图片360度旋转

Circlr是一款可以对产品图片进行360度全方位旋转展示的jQuery插件。Circlr通过按一定角度规律拍摄的产品图片,制作出可以使用鼠标拖动、鼠标滚轮和移动触摸来进行图片逐帧旋转的效果。比先前的Rollerblade,动画顺畅了许多,也更易于控制,该插件非常适合于商品的展示。

它的特点有:

支持水平或垂直方向旋转。

支持移动触摸事件。

支持滚动事件。

图片预加载处理。

可以反向和循环旋转图片。

jQ酷实例教程:jQuery产品图片360度旋转Circlr

引入核心文件

<script src='js/jquery.js'></script>  
<script src='js/circlr.js'></script>

建立html,只需建立一个放置图片的DIV容器,当然还可以加入一个加载的DIV提高体验性。

<div id="circlr">
 <img data-src="picture/00.jpg">
 <img data-src="picture/01.jpg">
 <img data-src="picture/02.jpg">
 <img data-src="picture/03.jpg">
 <img data-src="picture/04.jpg">
 <img data-src="picture/05.jpg">
 <img data-src="picture/06.jpg">
 <img data-src="picture/07.jpg">
 <img data-src="picture/08.jpg">
 <img data-src="picture/09.jpg">
 <img data-src="picture/10.jpg">
 <img data-src="picture/11.jpg">
 <img data-src="picture/12.jpg">
 <img data-src="picture/13.jpg">
 <img data-src="picture/14.jpg">
 <img data-src="picture/15.jpg">
 <div id="loader"></div>
</div>

写入JS,初始化插件

var crl = circlr(element, options); //调用方法
//element:放置图片的容器元素的ID。
//options:参数对象。 
//实例
 var crl = circlr('circlr', {
  scroll : true,
  loader : 'loader'
 });

参数

mouse:是否通过鼠标进行图片旋转,默认值为true。

scroll:是否通过scroll进行图片旋转,默认值为false。

vertical:是否在垂直方向上移动鼠标时旋转图片,默认值为false。

reverse:是否反转方向,默认值为false。

cycle:是否循环旋转图片,默认值为true。

start:开始动画帧,默认值为0。

speed:动画帧通过circlr.turn(i)切换的速度,默认值为50毫秒。

autoplay:是否自动进行图片360度旋转播放,默认值为false。

playSpeed:动画序列的播放速度,默认值为100毫秒。

loader:预加载DOM元素的ID。

ready:图片加载完成后的回调函数。

change:动画帧改编之后的回调函数(以当前帧和总帧数为参数)。

方法

crl.el:返回对象的DOM元素节点。

crl.length:返回对象的总的动画帧数。

crl.turn(i):动画旋转到第i帧。

crl.go(i):动画跳转到第i帧。

crl.play():开始动画序列的播放。

crl.stop():停止动画播放。

crl.hide():隐藏对象的DOM元素节点。

crl.show():显示对象的DOM元素节点。

crl.set(options):在插件初始化之后改变对象的参数:

    vertical

    reverse

    cycle

    speed

    playSpeed

以上内容是本文给大家介绍的基于jQuery Circlr插件实现产品图片360度旋转,希望大家喜欢。

Javascript 相关文章推荐
轻轻松松学JS调试(不下载任何工具)
Apr 14 Javascript
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
Jan 02 Javascript
JavaScript中判断整数的多种方法总结
Nov 08 Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
JavaScript基于数组实现的栈与队列操作示例
Dec 22 Javascript
小程序调用微信支付的方法
Sep 26 Javascript
基于Vue实现微前端的示例代码
Apr 24 Javascript
js实现拖拽与碰撞检测
Sep 18 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
JavaScript的一些小技巧分享
Jan 06 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 #Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 #Javascript
jquery+正则实现统一的表单验证
Sep 20 #Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 #Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 #Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
Sep 19 #Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 #Javascript
You might like
php中一个有意思的日期逻辑处理
2012/03/25 PHP
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
js获取url传值的方法
2015/12/18 Javascript
一分钟理解js闭包
2016/05/04 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
在Docker快速部署Node.js应用的详细步骤
2016/09/02 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
js 颜色选择插件
2017/01/23 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
详解vue express启动数据服务
2017/07/05 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
Python实现拼接多张图片的方法
2014/12/01 Python
Python中subprocess模块用法实例详解
2015/05/20 Python
Python制作exe文件简单流程
2019/01/24 Python
python实现批量转换图片为黑白
2020/06/16 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
银行自荐信范文
2015/03/25 职场文书
文明旅游倡议书
2015/04/28 职场文书
廉洁自律证明
2015/06/24 职场文书
公司规章制度范本
2015/08/03 职场文书
使用goaccess分析nginx日志的详细方法
2021/07/09 Servers