jQuery Plugin : Step Carousel Viewer ( 圖片播放特效 )

1.先將 jqeury.js 以及 stepcaruousel.js 載入進來


2.CSS 樣式的設定，可以自行作適當的調整


3.接下來就是要顯示的圖片的架構，總共有三層，用 div 包住 image


4.最後就是將 Step Carousel 與 HTML 作連接，將下面的程式碼放在 body 裡面




點此 Demo 連結觀看

你會發現下面有四個連結的按鈕可以讓你直接操控圖片，這是因為 Step Carousel Viewer 有提供 stepBy 跟 stepTo 兩個 method 讓你呼叫，直接對圖片進行操控，只要加入以下的程式碼就可以



另外，如果想要讓照片自動輪播的話，其實很簡單，只要設定 interval 再配和 stepBy 即可，程式碼如下




點此 Demo 連結觀看

以上，就是 Step Carousel Viewer 所提供的圖片特效，如果想知道更詳細的資訊，可以到 Step Carousel Viewer 官方網站。