这是一款非常实用的可以对产品图片进行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