这是一款非常实用的可以对产品图片进行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
浏览器兼容
- Internet Explorer 7+
- Chrome
- Safari
- Firefox
- Opera