基于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 相关文章推荐
基于jquery的15款幻灯片插件
Apr 10 Javascript
javascript+html5实现仿flash滚动播放图片的方法
Apr 27 Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 Javascript
通过js控制时间,一秒一秒自己动的实例
Oct 25 Javascript
在 Node.js 中使用 async 函数的方法
Nov 17 Javascript
vue 监听屏幕高度的实例
Sep 05 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
基于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下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
php英文单词统计器
2016/06/23 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
python根据经纬度计算距离示例
2014/02/16 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
Python整数对象实现原理详解
2019/07/01 Python
python区块及区块链的开发详解
2019/07/03 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
CSS3中Animation动画属性用法详解
2016/07/04 HTML / CSS
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
Mamas & Papas沙特阿拉伯:英国最受欢迎的婴儿品牌
2017/11/20 全球购物
美国在线购物频道:Shop LC
2019/04/21 全球购物
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
在校生钳工实习自我鉴定
2013/09/19 职场文书
小学清明节活动方案
2014/03/08 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
小学教育见习报告
2014/10/31 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python