1. 程式人生 > >7個前端不容錯過的jQuery圖片滑塊外掛

7個前端不容錯過的jQuery圖片滑塊外掛

作為前端開發者,我們會碰到很到各種各樣的jQuery外掛,但老實說,很少有自己寫的。今天要分享的幾款jQuery圖片滑塊外掛,也就是jQuery焦點圖外掛,基本上會在每個網站都有應用,可以下載看看,也許你可以用到。

1、jQuery多圖並列焦點圖外掛

今天我們要來分享一款比較特別的jQuery焦點圖外掛,它允許你自己定義當前畫面的圖片數量,在這個演示中,我們定義了3張圖片一起顯示。和其他jQuery焦點圖一樣,這款焦點圖外掛的圖片下方也有一排小按鈕,可以任意切換圖片。另外,每張圖片也都有文字描述。

jquery-mult-image-player

線上演示 / 原始碼下載

2、jQuery動畫焦點圖 可自動播放圖片

這是一款簡單而實用的jQuery焦點圖外掛,焦點圖不僅可以在播放圖片的時候讓圖片有淡入淡出的動畫效果,而且圖片可以自動播放。該jQuery焦點圖的每一張圖片都可以設定文字描述,並浮動在圖片之上。由於其簡單的配置,這款jQuery焦點圖可以很方便地與你的網站相結合。

jquery-auto-play-image

線上演示 / 原始碼下載

3、jQuery縮圖動態縮放焦點圖

今天我們要來分享一款jQuery焦點圖,這款jQuery焦點圖的圖片切換按鈕是幾張圖片的縮圖,滑鼠滑過縮圖即可切換至相應的圖片。焦點圖的切換動畫是圖片的動態縮放,動畫效果還算新穎,圖片切換也比較流暢,是一款值得一試的jQuery焦點圖。

jquery-thumb-zoom-player

線上演示 / 原始碼下載

4、jQuery全屏滑塊焦點圖 可自定義內容

之前我們已經分享過很多jQuery焦點圖外掛了,很多焦點圖都非常實用,可以應用到自己的網站上去。這次要分享的也是一款基於jQuery的全屏方式滑塊焦點圖外掛,滑塊的內容可以自定義,可以是幾張圖片的組合,也可以是橫幅廣告。

jquery-full-image-slider

線上演示 / 原始碼下載

5、jQuery/CSS3動畫相簿圖片瀏覽外掛

之前我們分享過一款基於jQuery的仿QQ空間相簿瀏覽外掛,功能上已經十分完善,但是缺少動畫效果。今天這款jQuery相簿外掛正好彌補了動畫的缺陷,由於CSS3特性的利用,當我們點選圖片瀏覽的時候,縮圖就會以淡入淡出的動畫效果消失,然後出現原始圖片。同時你也可以點選左右按鈕來逐一瀏覽相簿中的圖片。

jquery-css3-gallery-animation

線上演示 / 原始碼下載

6、jQuery縱向滑塊焦點圖外掛 圖片切換流暢

今天我們要來分享一款效果很酷的jQuery焦點圖,它的Tab切換方式是縱向的,而且圖片切換的方式也是縱向的,另外整個jQuery焦點圖的色彩非常棒,給人一種神祕的感覺。焦點圖的圖片切換還是比較流暢的。

jquery-ver-image-slider

線上演示 / 原始碼下載

7、jQuery/CSS3立方體翻轉3D全屏焦點圖

天我們要來分享一款非常大氣的HTML5/CSS3 3D全屏焦點圖,在頁面兩側,有兩個很立體的左右箭頭進行圖片切換。這款HTML5焦點圖的圖片切換方式是3D效果的,類似立方體翻轉一樣,焦點圖預設顯示文字,我們已經將文字替換成圖片,效果更酷。

html5-3d-cube-image-player

線上演示 / 原始碼下載

希望以上jQuery圖片滑塊外掛能給你帶來幫助,歡迎收藏分享。