Circlr插件是一款基于jQuery的可以对图片进行360度全方位旋转展示的插件。Circlr通过按一定角度规律拍摄的产品图片，制作出可以使用鼠标拖动、鼠标滚轮和移动触摸来进行图片逐帧旋转的效果。比先前的Rollerblade，动画顺畅，也更易于控制，非常适合于商品的展示。
特点
1. 支持水平或垂直方向旋转。 2. 支持移动触摸事件。 3. 支持滚动事件。 4. 图片预加载处理。 5. 可以反向和循环旋转图片。
代码基本使用
使用方法：
1. 引用js文件包
<script src="js/jquery.min.js"></script>
<script src="js/circlr.min.js"></script>
#### 2.书写结构：
<div class="container">
<div id="circlr">
<img data-src="picture/1.png" />
<img data-src="picture/2.png" />
<img data-src="picture/3.png" />
... // 这里放入所需图片即可， 图片太多可用js动态添加
<div id="loader"></div>
</div>
</div>
注意， 是 自定义属性 data-src 里面写路径 2. loader 是 加载项
图片太多了可以用js动态添加
<div class="container">
<div id="circlr">
<div id="loader"></div>
</div>
<script>
// 需要准备 74个图片
for (var i = 1; i <= 74; i++) {
// 创建图片 别忘更换属性
var img = $("<img data-src='images/" + i + ".png'/>");
// 追加到 circlr里面
$("#circlr").append(img);// prepend 内部的前面添加 append 内部的后面添加
}
</script>
</div>
3. 书写css
#circlr {
cursor: move;
margin: 0 auto;
min-height: 100px;
position: relative;
}
#circlr #loader {
background: url(../images/loader.gif) center center no-repeat;
bottom: 0;
display: none;
left: 0;
position: absolute;
right: 0;
top: 0;
}
4.调用文件对象
<script type="text/javascript">
var crl = circlr('circlr', {
scroll : true,
loader : 'loader'
});
</script>
参数和方法
参数
| 参数名 | 说明 |
|---|---|
| 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 |
相关代码资源
码云
3d旋转car
微云
3d旋转car