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