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

Circlr插件是一款基于jQuery的可以对图片进行360度全方位旋转展示的插件。Circlr通过按一定角度规律拍摄的产品图片，制作出可以使用鼠标拖动、鼠标滚轮和移动触摸来进行图片逐帧旋转的效果。比先前的Rollerblade，动画顺畅，也更易于控制，非常适合于商品的展示。

主要的特点有：

支持水平或垂直方向旋转。

支持移动触摸事件。

支持滚动事件。

图片预加载处理。

可以反向和循环旋转图片。

源码下载（内含完整图片）https://download.csdn.net/download/zero________________/10424539

1.引入js文件

 <!-- y这是一个jquery插件，所以先引入jquery -->
    <script src="js/jquery.min.js"></script>
    <script src="js/circlr.min.js"></script>>

2.html结构

<div class="container">
        <div id="circlr">
             <img data-src="images/1.png" />
             <img data-src="images/2.png" /> 
             <img data-src="images/3.png" />    
             ...     //  这里放入所需图片即可， 图片太多可用js动态添加
            <div id="loader"></div>
        </div>
 </div>  

  图片太多了咱们用js动态添加

注意， 是 自定义属性 data-src 里面写路径 2. loader 是 加载项

<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.js

<script>
    $(function () {  // 加一个入口函数 ，意思是等上面的 74张图片加载完毕之后，才执行
        var crl = circlr('circlr', {
            scroll: true,  // 滚动滚轮也能旋转
            loader: 'loader'
        })
    })
</script>

源码下载（内含完整图片）https://download.csdn.net/download/zero________________/10424539

有什么不足的地方，希望大家可以指出来，共同努力共同进步。案例中用到了很多图片，都在上面链接地址中可以下载。