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

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

主要的特点有：

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

支持移动触摸事件。

支持滚动事件。

图片预加载处理。

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

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

1.引入js文件

 
    
    >

2.html结构

        

             
              
                 
             ...     //  这里放入所需图片即可， 图片太多可用js动态添加
            

        
 
  

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

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

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

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

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