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

它的特點(diǎn)有：

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

支持移動(dòng)觸摸事件。

支持滾動(dòng)事件。

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

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

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

引入核心文件

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

建立html，只需建立一個(gè)放置圖片的DIV容器，當(dāng)然還可以加入一個(gè)加載的DIV提高體驗(yàn)性。

<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ù)對(duì)象。 
//實(shí)例
 var crl = circlr('circlr', {
  scroll : true,
  loader : 'loader'
 });

參數(shù)

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

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

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

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

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

start：開(kāi)始動(dòng)畫(huà)幀，默認(rèn)值為0。

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

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

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

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

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

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

方法

crl.el：返回對(duì)象的DOM元素節(jié)點(diǎn)。

crl.length：返回對(duì)象的總的動(dòng)畫(huà)幀數(shù)。

crl.turn(i)：動(dòng)畫(huà)旋轉(zhuǎn)到第i幀。

crl.go(i)：動(dòng)畫(huà)跳轉(zhuǎn)到第i幀。

crl.play()：開(kāi)始動(dòng)畫(huà)序列的播放。

crl.stop()：停止動(dòng)畫(huà)播放。

crl.hide()：隱藏對(duì)象的DOM元素節(jié)點(diǎn)。

crl.show()：顯示對(duì)象的DOM元素節(jié)點(diǎn)。

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

    vertical

    reverse

    cycle

    speed

    playSpeed

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

最新評(píng)論