近年來，網頁設計時，由於考慮到手持裝置越來越被廣泛的使用，就算沒有做成手持裝置的網頁，也會盡量避免FLASH的使用，今天來介紹一套jquery的plugin jCarousel，輪播的效果非常不錯。
plugin名稱：jCarousel
官網位置：http://sorgalla.com/projects/jcarousel/
版本：0.3.4 (2015/9/23)
不囉嗦先來看最基本的橫向捲動jCarousel DEMO
使用方法：
步驟一：引入需要的javascript 及 css
<link href="/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/lib/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="/skins/tango/skin.css" />
步驟二：Html架構如下
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="/images/01.png" widtd="64" height="64" alt="" /></li>
<li><img src="/images/02.png" widtd="64" height="64" alt="" /></li>
<li><img src="/images/03.png" widtd="64" height="64" alt="" /></li>
<li><img src="/images/04.png" widtd="64" height="64" alt="" /></li>
<li><img src="/images/05.png" widtd="64" height="64" alt="" /></li>
<li><img src="/images/06.png" widtd="64" height="64" alt="" /></li>
<li><img src="/images/07.png" widtd="64" height="64" alt="" /></li>
<li><img src="/images/08.png" widtd="64" height="64" alt="" /></li>
</ul>
步驟三：加上以下的javascript
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
就這樣完成了!!簡單吧
還有更多細節的參數可以調整，例如自動撥放，ajax的loading，一次移動幾個元素...等，這邊就請大家自行到官網上的examples去觀看囉
參數說明
下面介紹一些比較基本的參數，更詳細的內容還請大家到官網上了解。
| 參數 | 類別 | 預設值 | 說明 |
|---|---|---|---|
| vertical | bool | false | 改變動畫的方向垂直或水平，預設為false為水平，就如同DEMO一樣，如果改為true的話則為垂直 |
| rtl | bool | false | 切換由到左模式 (Right-To-Left mode) |
| start | integer | 1 | 從第幾個li開始 |
| offset | integer | 1 | tde index of tde first available item at initialisation. |
| size | integer | Number of existing <li> elements if size is not passed explicitly | 總共有幾個li |
| scroll | integer | 3 | 一次捲動幾個li |
| visible | integer | null | If passed, tde widtd/height of tde items will be calculated and set depending on tde widtd/height of tde clipping, so tdat exactly tdat number of items will be visible. |
| animation | mixed | "fast" | 動畫速度，可以使用"slow"、"fast"或毫秒為單位( jQuery Documentation ).假如設定為0，表示關掉動畫 |
| easing | string | null | 動畫效果 ( jQuery Documentation ). |
| auto | integer | 0 | 是否自動輪播 |
| wrap | string | null | 是否開啟循環撥放. 選項有 "first", "last", "botd" 及 "circular" .假如設定為 null, 表示不會循環撥放. |
| buttonNextdTML | string | <div></div> |
Next按鈕的html標籤，如果設定為null的話，則不會產生Next按鈕 |
| buttonPrevHTML | string | <div></div> |
Prev按鈕的html標籤，如果設定為Prev的話，則不會產生Next按鈕 |
| buttonNextEvent | string | "click" | 設定甚麼事件會觸發Next |
| buttonPrevEvent | string | "click" | 設定甚麼事件會觸發Prev |