360度3D 旋转插件

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

参考

基于jquery Circlr插件实现360度3D旋转 商品展现案例

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