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

Circlr是一个jQuery插件，可以将产品图片旋转360度。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=' http : picture/00 . jpg ' img data-src=' http : picture/01 . jpg ' img data-src=' http : picture/02 . jpg ' img data-src=' http : picture/03 . jpg ' img data-src=' http : picture/04 . jpg ' img data-src=' http

var crl=circlr(元素，选项)；//调用方法//元素：放置图片的容器元素的ID。//选项：参数对象。//instance varcrl=circlr(' circlr '，{scroll: true，loader : ' loader ' })；参数

鼠标：是否用鼠标旋转图片，默认值为真。

滚动：是否通过滚动旋转图片；默认值为false。

垂直：在垂直方向移动鼠标时是否旋转图片；默认值为false。

反转：是否反转方向；默认值为false。

循环：是否循环旋转图片，默认值为真。

开始：开始动画帧，默认值为0。

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

自动播放：是否360度旋转自动播放图片；默认值为false。

PlaySpeed:动画序列的播放速度，默认值为100ms。

加载器：预加载的DOM元素的标识。

Ready:图片加载后的回调函数。

变化：动画帧适配后的回调函数(以当前帧和总帧数为参数)。

方法

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):在插件初始化后更改对象的参数：

垂直的

反面的

循环

速度

播放速度

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