jQuery的Slide Show Plugin

401514_3284011788938_562110386_n

我很喜歡像這樣的效果,中間可以輪播圖片,現在有些介紹app的網站,甚至會用這個來輪播他們的UI,剛好找到這個外掛,應該蠻實用的。

Slide外掛網站

準備這樣的html
<div id="slides">
<div class="slides_container">
</div>
</div>

外面那層是要使用外掛的,內容則是放在slides_container那層,使用外掛後裡面放的東西就會變成slider了。

然後像這樣使用外掛。
  1. $("#slides").slides();  

也可以做一些額外的設定:
preload: 是否要有讀取中的圖像
preloadImage: 圖取動畫的位置
container: slider放置的容器,預設是slides_container
generateNextPrev: 是否自動生成下一頁跟上一頁按鈕
next, prev: 上一頁跟下一頁的class名稱
generatePagination: 是否生成頁籤,就是下面的跳頁圈圈。
paginationClass: 生成跳頁圈圈的class名稱。
currentClass: 目前頁面的class名稱。
fadeSpeed: 淡出淡入速度。
fadeEasing: 淡出淡入的回饋效果。
slideSpeed: 滑動速度。
slideEasing: 滑動的回饋效果。
start: 設定第一張圖片。
randomize: 是否隨機跳圖片。
play: 設定自動撥放的時間。
hoverPause: 是否滑入就停止slide。

還有一些可以看官網的設定,並且有範例可以下載,只不過要使用可能得花一些時間調CSS。

Demo

留言