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

它的特點有：

支持水平或垂直方向旋轉(zhuǎn)。

支持移動觸摸事件。

支持滾動事件。

圖片預(yù)加載處理。

可以反向和循環(huán)旋轉(zhuǎn)圖片。

jQ酷實例教程：jQuery產(chǎn)品圖片360度旋轉(zhuǎn)Circlr

引入核心文件

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

建立html，只需建立一個放置圖片的DIV容器，當(dāng)然還可以加入一個加載的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); //調(diào)用方法
//element：放置圖片的容器元素的ID。
//options：參數(shù)對象。 
//實例
 var crl = circlr('circlr', {
  scroll : true,
  loader : 'loader'
 });

參數(shù)

mouse：是否通過鼠標(biāo)進(jìn)行圖片旋轉(zhuǎn)，默認(rèn)值為true。

scroll：是否通過scroll進(jìn)行圖片旋轉(zhuǎn)，默認(rèn)值為false。

vertical：是否在垂直方向上移動鼠標(biāo)時旋轉(zhuǎn)圖片，默認(rèn)值為false。

reverse：是否反轉(zhuǎn)方向，默認(rèn)值為false。

cycle：是否循環(huán)旋轉(zhuǎn)圖片，默認(rèn)值為true。

start：開始動畫幀，默認(rèn)值為0。

speed：動畫幀通過circlr.turn(i)切換的速度，默認(rèn)值為50毫秒。

autoplay：是否自動進(jìn)行圖片360度旋轉(zhuǎn)播放，默認(rèn)值為false。

playSpeed：動畫序列的播放速度，默認(rèn)值為100毫秒。

loader：預(yù)加載DOM元素的ID。

ready：圖片加載完成后的回調(diào)函數(shù)。

change：動畫幀改編之后的回調(diào)函數(shù)（以當(dāng)前幀和總幀數(shù)為參數(shù)）。

方法

crl.el：返回對象的DOM元素節(jié)點。

crl.length：返回對象的總的動畫幀數(shù)。

crl.turn(i)：動畫旋轉(zhuǎn)到第i幀。

crl.go(i)：動畫跳轉(zhuǎn)到第i幀。

crl.play()：開始動畫序列的播放。

crl.stop()：停止動畫播放。

crl.hide()：隱藏對象的DOM元素節(jié)點。

crl.show()：顯示對象的DOM元素節(jié)點。

crl.set(options)：在插件初始化之后改變對象的參數(shù)：

    vertical

    reverse

    cycle

    speed

    playSpeed

以上內(nèi)容是本文給大家介紹的基于jQuery Circlr插件實現(xiàn)產(chǎn)品圖片360度旋轉(zhuǎn)，希望大家喜歡。

最新評論