輕量級 jQuery Slideshow Plugin

相信在網路上可以找到一堆 jQuery Slideshow Plugin,例如 33 POWERFUL JQUERY SLIDESHOW (SLIDERS) PLUGINS AND TUTORIALS 介紹了 33 種不同的 Slideshow Plugin,有些用起來很複雜,有些則是過於簡易,本來是想自己寫一套出來,但是想想是否可以找一套已經有輪子的架構,再拿來修改成專案所需要的套件,於是參考了這套原始碼,發現此專案只有提供 fade 和 slide 兩種效果,沒有像是投影片可以任意滑動的功能,所以自己把此功能 patch 上去,可以參考我放到 Github 的專案,寫法很容易,可以直接看線上 Example

載入 jQuery 和 plugin


Html 和 CSS

可以搭配後端 PHP, Python, Ruby 輸出網站輪播圖片

SlideShow Plugin

(function ($) {
    $('.slideShow').slideShow({
        interval: 3,
        start: 'random',
        transition: {
            mode: 'slideshow',
            speed: 800
        }
    });
})(jQuery);
可以自行定義輪播間隔時間,初始化為隨機或者是指定任一張圖片,以及輪播速度…等,詳細部份可以參考官方作者寫的 README

完整 Example

jQuery Slideshow Plugin Source Code