图片/图形
产品图片360度旋转预览jQuery插件
PetitQ
这是一款非常实用的可以对产品图片进行 360 度全方位旋转展示的 jQuery 插件。该插件通过使用不同角度的产品图片，制作出可以使用鼠标拖动、鼠标滚轮和移动触摸来进行图片逐帧旋转的效果。该插件非常适合于商品的展示。它的特点有：
支持水平或垂直方向旋转
也想出现在这里？联系我们吧
支持移动触摸事件
支持滚动事件
图片预加载处理
可以反向和循环旋转图片
使用方法
该产品图片旋转插件首先要引入 jQuery 和 circlr.js 文件。
<script src='js/jquery.js'></script>
<script src='js/circlr.js'></script>
然后在你想要放置图片展示的元素上调用该插件：
var crl = circlr(element, options);
element：放置图片的容器元素的 ID
options：参数对象。
配置参数
下面是该图片 360 度旋转插件的可用参数：
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：动画帧改编之后的回调函数（以当前帧和总帧数为参数）
方法
下面是该图片 360 度旋转插件的可用方法：
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
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
