網頁設計

關於網頁設計的技術或相關資訊分享

jquery jCarousel

網站投影片展示 - jCarousel 效果介紹

近年來,網頁設計時,由於考慮到手持裝置越來越被廣泛的使用,就算沒有做成手持裝置的網頁,也會盡量避免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