jQuery旋轉輪播式插件CarouFredSel的用法

本篇內容主要講解“jQuery旋轉輪播式插件CarouFredSel的用法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“jQuery旋轉輪播式插件CarouFredSel的用法”吧!

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

主要特性：

支持完整自定義和皮膚

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

支持可變的顯示項目個數

支持鍵盤和鼠標導航

7個內建的效果: none, scroll, directscroll, fade, crossfade, cover and uncover.

內建自定義的智能事件和加載選項

定義的高和寬中保證顯示項目對齊（左/中/右）.

支持動態添加和刪除顯示項目

幻燈創建后也可以支持獲取，重置或者設置配置選項

如何使用？

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

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

到此，相信大家對“jQuery旋轉輪播式插件CarouFredSel的用法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！