介紹一款使用簡(jiǎn)單，支持自定義樣式并且靈活健壯的jQuery旋轉(zhuǎn)輪播插件：CarouFredSel，能夠幫助你迅速的構(gòu)建一個(gè)輪播式的幻燈展示，使用簡(jiǎn)單，功能強(qiáng)大，希望大家喜歡！

[[79203]]

主要特性：

支持完整自定義和皮膚

支持responsive/fluid/liquid，保證各種客戶端的顯示

支持可變的顯示項(xiàng)目個(gè)數(shù)

支持鍵盤和鼠標(biāo)導(dǎo)航

7個(gè)內(nèi)建的效果: none, scroll, directscroll, fade, crossfade, cover and uncover.

內(nèi)建自定義的智能事件和加載選項(xiàng)

定義的高和寬中保證顯示項(xiàng)目對(duì)齊（左/中/右）.

支持動(dòng)態(tài)添加和刪除顯示項(xiàng)目

幻燈創(chuàng)建后也可以支持獲取，重置或者設(shè)置配置選項(xiàng)

如何使用？

以下是基本使用代碼范例，如果大家有興趣，可以參考CarouFredSel網(wǎng)站上的其它例子

HTML代碼：

< class="image_carousel">    
     < 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" />    
     </>    
     < class="clearfix"></>    
 </>  

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(); 

在線演示

本地下載