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度旋转