分享一款強大的jQuery旋轉輪播式插件 - CarouFredSel
今天我們介紹一款使用簡單，支持自定義樣式并且靈活健壯的jQuery旋轉輪播插件：CarouFredSel ，能夠幫助你迅速的構建一個輪播式的幻燈展示，使用簡單，功能強大，希望大家喜歡！
主要特性：
- 支持完整自定義和皮膚
- 支持responsive/fluid/liquid，保證各種客戶端的顯示
- 支持可變的顯示項目個數
- 支持鍵盤和鼠標導航
- 7個內建的效果: none, scroll, directscroll, fade, crossfade, cover and uncover.
- 內建自定義的智能事件和加載選項
- 定義的高和寬中保證顯示項目對齊（左/中/右）.
- 支持動態添加和刪除顯示項目
- 幻燈創建后也可以支持獲取，重置或者設置配置選項
如何使用？
以下是基本使用代碼范例，如果大家有興趣，可以參考CarouFredSel網站上的其它例子
HTML代碼：
<div class="image_carousel">
<div id="foo1">
<img src="/examples/images/small/basketball.jpg" alt="basketball" width="140" height="140" />
<img src="/examples/images/small/beachtree.jpg" alt="beachtree" width="140" height="140" />
<img src="/examples/images/small/cupcackes.jpg" alt="cupcackes" width="140" height="140" />
<img src="/examples/images/small/hangmat.jpg" alt="hangmat" width="140" height="140" />
<img src="/examples/images/small/new_york.jpg" alt="new york" width="140" height="140" />
<img src="/examples/images/small/laundry.jpg" alt="laundry" width="140" height="140" />
<img src="/examples/images/small/mom_son.jpg" alt="mom son" width="140" height="140" />
<img src="/examples/images/small/picknick.jpg" alt="picknick" width="140" height="140" />
<img src="/examples/images/small/shoes.jpg" alt="shoes" width="140" height="140" />
<img src="/examples/images/small/paris.jpg" alt="paris" width="140" height="140" />
<img src="/examples/images/small/sunbading.jpg" alt="sunbading" width="140" height="140" />
<img src="/examples/images/small/yellow_couple.jpg" alt="yellow couple" width="140" height="140" />
</div>
<div class="clearfix"></div>
</div>
CSS樣式：
.image_carousel {
padding: 15px 0 15px 40px;
}
.image_carousel img {
border: 1px solid #ccc;
background-color: white;
padding: 9px;
margin: 7px;
display: block;
float: left;
}
.clearfix {
float: none;
clear: both;
}
Javascript代碼：
$("#foo1").carouFredSel();
歡迎訪問GBin1.com
浙公網安備 33010602011771號