jCarousel

　　近年來，網頁設計時，由於考慮到手持裝置越來越被廣泛的使用，就算沒有做成手持裝置的網頁，也會盡量避免FLASH的使用，今天來介紹一套jquery的plugin-jCarousel，輪播的效果非常不錯。

 

plugin名稱：jCarousel

官網位置：http://sorgalla.com/projects/jcarousel/

版本：0.2.8 (2012/10/11)

 

不囉嗦先來看最基本的橫向捲動DEMO

使用方法：

步驟一：引入需要的javascript 及 css

1. <link href="/style.css" rel="stylesheet" type="text/css" />

2. <script type="text/javascript" src="/lib/jquery-1.4.2.min.js"></script>

3. <script type="text/javascript" src="/lib/jquery.jcarousel.min.js"></script>

4. <link rel="stylesheet" type="text/css" href="/skins/tango/skin.css" />

 

步驟二：Html架構如下

01. <ul id="mycarousel" class="jcarousel-skin-tango">

02. <li><img src="/images/01.png" widtd="64" height="64" alt="" /></li>

03. <li><img src="/images/02.png" widtd="64" height="64" alt="" /></li>

04. <li><img src="/images/03.png" widtd="64" height="64" alt="" /></li>

05. <li><img src="/images/04.png" widtd="64" height="64" alt="" /></li>

06. <li><img src="/images/05.png" widtd="64" height="64" alt="" /></li>

07. <li><img src="/images/06.png" widtd="64" height="64" alt="" /></li>

08. <li><img src="/images/07.png" widtd="64" height="64" alt="" /></li>

09. <li><img src="/images/08.png" widtd="64" height="64" alt="" /></li>

10. </ul>

 

步驟三：加上以下的javascript

1. jQuery(document).ready(function() {

2. jQuery('#mycarousel').jcarousel();

3. });

 

就這樣完成了!!簡單吧

還有更多細節的參數可以調整，例如自動撥放，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