flipster是一個(gè)Javascript庫(kù)，可以實(shí)現(xiàn)酷炫的3D輪播圖特效，不但非常美觀還動(dòng)感十足，還具有一下優(yōu)點(diǎn)：
1、使用了響應(yīng)式技術(shù)，支持手機(jī)移動(dòng)版客戶端、支持PC電腦客戶端。
2、靈活支持將任何HTML內(nèi)容實(shí)現(xiàn)3D特效，不僅局限于圖片、文字、視頻等。
3、支持多種方式觸發(fā)特效：觸摸、鼠標(biāo)滾輪、鍵盤(pán)等方式。
4、內(nèi)置了多種特效樣式，例如：旋轉(zhuǎn)木馬特效、封面輪播圖效果、旋轉(zhuǎn)輪效果、水平滑動(dòng)等，也支持自定義主題。
5、支持自定義參數(shù)配置，實(shí)現(xiàn)不同的效果，例如播放特效執(zhí)行回調(diào)函數(shù)Callback、是否開(kāi)啟鍵盤(pán)控制、是否自動(dòng)播放等等。
6、支持為動(dòng)態(tài)特效設(shè)置導(dǎo)航和分類：
通過(guò)data-flip-title設(shè)置導(dǎo)航標(biāo)題，例如：data-flip-title="丁香紫"
要設(shè)置分類，通過(guò)data-flip-category設(shè)置主分類標(biāo)題，例如：
data-flip-category="藍(lán)色"
子分類標(biāo)題，使用data-flip-title，例如：
data-flip-title="天藍(lán)色"
使用舉例說(shuō)明：
引入樣式文件：
<link type="text/css" rel="stylesheet" href="css/jquery.flipster.min.css">
引入javascript庫(kù)：
<script src="js/jquery.min.js"></script> <script src="js/jquery.flipster.min.js"></script>
演示代碼：
<div id="carousel">
<ul class="flip-items">
<li data-flip-title="粉紅">
<img src="img/text1.gif" alt="粉紅">
</li>
<li data-flip-title="天藍(lán)色" data-flip-category="藍(lán)色">
<img src="img/text5.gif">
</li>
<li data-flip-title="道奇藍(lán)" data-flip-category="藍(lán)色">
<img src="img/text6.gif">
</li>
</ul>
</div>
<script>
var carousel = $("#carousel").flipster({
style: 'carousel',
spacing: -0.5,
nav: true,
buttons: true,
});
</script>flipster動(dòng)畫(huà)支持配置的選項(xiàng)說(shuō)明：
參數(shù)名 | 參數(shù)值類型 | 說(shuō)明 | 默認(rèn)/示例值 |
| itemContainer | String 或 object | 3D特效項(xiàng)目容器的選擇器 | ul |
| itemSelector | String 或 object | 3D特效項(xiàng)目容器的子級(jí)選擇器 | li
|
style | arousel | 主題風(fēng)格的class類名，內(nèi)置了四個(gè)；如果自定義了風(fēng)格，填寫(xiě)自己的風(fēng)格類名稱 | coverflow |
spacing | Number | 每個(gè)特效項(xiàng)目之間的間距，只能填寫(xiě)數(shù)字，0表示無(wú)間距，負(fù)值表示重疊 | -0.6 |
| click | true false | true:點(diǎn)擊、鼠標(biāo)單擊，會(huì)動(dòng)態(tài)切換播放下一項(xiàng) false:禁用鼠標(biāo)點(diǎn)擊播放動(dòng)效功能。 | true |
| keyboard
| true false | true:啟用鍵盤(pán)左右箭頭按鍵控制動(dòng)效切換。 false:禁用鍵盤(pán)控制動(dòng)效功能。 | true |
| scrollwheel
| true false | true：表示啟用鼠標(biāo)滾輪或者觸控板控制3D動(dòng)效：上/左=上一個(gè)；下/右=下一個(gè) | true |
| touch
| true false | true:啟用觸摸屏滑動(dòng)切換動(dòng)效功能;
false:禁用觸摸屏滑動(dòng)功能。
| true
|
| nav
| true | false：不顯示動(dòng)畫(huà)導(dǎo)航； true或者'before'：顯示動(dòng)畫(huà)導(dǎo)航，且位于動(dòng)畫(huà)項(xiàng)目之前； | false |
| buttons
| true
false
'custom'
| true/false：顯示/隱藏用于切換上一個(gè)、下一個(gè)的箭頭按鈕。 “custom”：不會(huì)再顯示箭頭，而是可以自定義buttonPrev 和buttonNext | true
|
| buttonPrev
| text
html
| 切換上一個(gè)動(dòng)效的按鈕名稱（buttons值為'custom'時(shí)才有效）。
| Previous
|
| buttonNext
| text
html
| 切換下一個(gè)動(dòng)效的按鈕名稱（buttons值為'custom'時(shí)才有效）。
| Next
|
| onItemSwitch
| function
| 動(dòng)效項(xiàng)目切換時(shí)的回調(diào)函數(shù)。 | false
|
| start
| 'center' 或者 number | 表示默認(rèn)顯示第幾項(xiàng)。 | ‘center’ |
| fadeIn
| Number
| 毫秒數(shù)。
動(dòng)畫(huà)項(xiàng)目淡入淺出的速度。
| 400 |
| loop
| true 或者 false | true:循環(huán)播放特效
false:不循環(huán)播放特效
| false |
| autoplay
| false
或者
milliseconds
| false:不自動(dòng)播放；
非0正數(shù)：動(dòng)畫(huà)特效播放時(shí)間間隔
| false
|
| pauseOnHover | true 或者 false | 如果是true，則鼠標(biāo)懸停時(shí)暫停播放特效。 | true
|
以調(diào)用的方式控制特效：
var flipster = $('.my-flipster').flipster(); // 聲明myFlipster，以便引用
flipster.flipster('next'); // 顯示下一個(gè)動(dòng)效項(xiàng)目
flipster.flipster('prev'); // 顯示上一個(gè)動(dòng)效項(xiàng)目
flipster.flipster('jump', 0); // 調(diào)轉(zhuǎn)到指定動(dòng)效項(xiàng)目
flipster.flipster('jump', $('.my-item')); //跳轉(zhuǎn)到特定動(dòng)效項(xiàng)目flipster.flipster('play'); //重置自動(dòng)播放
flipster.flipster('play', 5000); //設(shè)定自動(dòng)播放動(dòng)效的時(shí)間間隔
flipster.flipster('pause'); //暫停自動(dòng)播放
flipster.flipster('stop'); //停止自動(dòng)播放動(dòng)效。
flipster.flipster('index'); //用于刪除或新增動(dòng)效項(xiàng)目，重新索引。