網頁設計

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

Jquery 手風琴圖片展示效果

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

外掛基本資料

外掛名稱:liteAccordion 

版本:1.1

作者網站:點我連結

下載連結:liteAccordion

引用檔案:jquery 1.4.4

範例:

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

liteAccordion demo

使用方法:

先載入需要的js及css檔

{codecitation style="brush: html;"}

 

{/codecitation}

接著是Html的部分如下

{codecitation style="brush: html;"}

  1. Slide One

    image
    I can haz big caek?
  2. Slide Two

    image
    Whoops.
  3. Slide Three

    image
    Some caption text goes in here...
  4. Slide Four

    image
    Pew pew pew!
  5. Slide Five

    image
    More caption text here!

{/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無法完整支援