Circlr是一款可以對產品圖片進行360度全方位旋轉展示的jQuery插件。Circlr通過按一定角度規律拍攝的產品圖片，制作出可以使用鼠標拖動、鼠標滾輪和移動觸摸來進行圖片逐幀旋轉的效果。比先前的Rollerblade，動畫順暢了許多，也更易于控制，該插件非常適合于商品的展示。

它的特點有：

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

支持移動觸摸事件。

支持滾動事件。

圖片預加載處理。

可以反向和循環旋轉圖片。

jQ酷實例教程：jQuery產品圖片360度旋轉Circlr

引入核心文件

<script src='js/jquery.js'></script>  <script src='js/circlr.js'></script>

建立html，只需建立一個放置圖片的DIV容器，當然還可以加入一個加載的DIV提高體驗性。

<div id="circlr"> <img data-src="picture/00.jpg"> <img data-src="picture/01.jpg"> <img data-src="picture/02.jpg"> <img data-src="picture/03.jpg"> <img data-src="picture/04.jpg"> <img data-src="picture/05.jpg"> <img data-src="picture/06.jpg"> <img data-src="picture/07.jpg"> <img data-src="picture/08.jpg"> <img data-src="picture/09.jpg"> <img data-src="picture/10.jpg"> <img data-src="picture/11.jpg"> <img data-src="picture/12.jpg"> <img data-src="picture/13.jpg"> <img data-src="picture/14.jpg"> <img data-src="picture/15.jpg"> <div id="loader"></div></div>

寫入JS，初始化插件

var crl = circlr(element, options); //調用方法//element：放置圖片的容器元素的ID。//options：參數對象。 //實例 var crl = circlr('circlr', {  scroll : true,  loader : 'loader' });

參數

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

以上內容是本文給大家介紹的基于jQuery Circlr插件實現產品圖片360度旋轉，希望大家喜歡。