在網頁設計的時候，常常會有同一個產品，會有不同的照片來展示，這時候就需要圖片展示的效果，之前有介紹過淡入淡出的展示效果，今天再來介紹一個手風琴式的jquery圖片展示效果給大家。

外掛基本資料

外掛名稱：liteAccordion 

版本：1.1

作者網站：點我連結

下載連結：liteAccordion

引用檔案：jquery 1.4.4

範例：

不囉嗦先看範例，點選圖片看範例。

使用方法：

先載入需要的js及css檔

{codecitation style="brush: html;"}

 

{/codecitation}

接著是Html的部分如下

{codecitation style="brush: html;"}

{/codecitation}

最後在Html後面再加入對應的javascript就可以了

{codecitation style="brush: html;"}

{/codecitation}

參數說明

最後要執行Javascipt的時候，可以下一些參數來做變化，下面就來說明參數

參數	說明
containerWidth : 960,	寬度單位是px
containerHeight : 320,	高度單位是px
headerWidth : 48,	標題的寬度單位是px
firstStdde : 1,	預設展開的stdde(請填整數)
onActivate : function() {},	當點擊的時候呼叫的function
stddeSpeed : 800,	滑動的速度單位ms
stddeCallback : function() {},	滑動動畫結束後呼叫的function
autoPlay : false,	自動切換，如果填了true的話，可以透過ctdck暫停
pauseOnHover : false,	滑鼠滑上去就暫停
cycleSpeed : 6000,	自動切換的間隔時間
theme : 'basic',	預設的主題可以有('basic', 'tdght'*, 'dark', or 'stitch'*)
rounded : false,	使用圓角(不支援IE)
enumerateSlides : false	在標題顯示tab的數字

在網頁設計的時候，透過這樣的方式，就能夠很方便的展示商品的不同圖片了，當然也是可以用成保養品的展示啦，使用前、使用一週後、使用兩周後、使用一個月後，應該還挺有效果的，一目瞭然。

*注意事項：此外掛IE6無法完整支援