Circlr插件是一款基于jQuery的可以对图片进行360度全方位旋转展示的插件。可以使用鼠标拖动、鼠标滚轮和移动触摸来进行图片逐帧旋转的效果。
主要的特点有：
支持水平或垂直方向旋转。
支持移动触摸事件。
支持滚动事件。
图片预加载处理。
可以反向和循环旋转图片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>360度3D旋转</title>
<style>
#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;
}
</style>
</head>
<body>
<div class="container">
<div id="circlr">
<div id="loader"></div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/circlr.min.js"></script>
<script>
// 图片太多用js动态添加
for (var i = 1; i <= 40; i++) {
var img = $("<img data-src='images/" + i + ".png'/>");
$("#circlr").append(img);
}
</script>
<script>
$(function () { // 入口函数 ，等上面的图片加载完毕之后才执行
var crl = circlr('circlr', {
scroll: true, // 滚动滚轮也能旋转
loader: 'loader'
})
})
</script>
</body>
</html>参数
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
下载