隨著前端技術(shù)和瀏覽器技術(shù)的不斷發(fā)展，人們開始對網(wǎng)頁視覺效果的要求越來越高。我們經(jīng)常會在頁面中看到很多炫酷的圖片焦點(diǎn)圖播放控件，有些甚至是大 屏的焦點(diǎn)圖占用大片的頁面空間，從而吸引用戶的眼球。本文要分享的就是一些超絢麗的jQuery焦點(diǎn)圖動畫插件，有些不僅基于jQuery，還帶有 CSS3的動畫特效，因此顯得更加炫酷。

1、jQuery實(shí)用圖片滑塊焦點(diǎn)圖 支持移動端滑動

今天我們要再來介紹一款jQuery實(shí)用圖片滑塊焦點(diǎn)圖，它也支持移動端的觸屏滑動，這款插件并沒有特別的動畫效果，但方便實(shí)用。

在線演示        源碼下載

2、HTML5/jQuery 3D焦點(diǎn)圖插件 多種超酷切換動畫

之前我們分享過一些很酷的焦點(diǎn)圖插件了，有些是基于jQuery的焦點(diǎn)圖應(yīng)用，今天我們要分享一款基于HTML5和jQuery的3D焦點(diǎn)圖插件，該HTML5焦點(diǎn)圖有多種超酷的切換動畫，包括3D百葉窗、3D翻轉(zhuǎn)等特效，有些切換效果在高版本Chrome中有效果。

在線演示        源碼下載

3、jQuery自動滑塊焦點(diǎn)圖插件 帶縮略圖

今天我們再來介紹一款比較實(shí)用的jQuery焦點(diǎn)圖插件，它的特點(diǎn)是可以自動播放圖片，并可以設(shè)置暫停。另外，這款焦點(diǎn)圖的圖片切換動畫也比較多樣化，而且在圖片下方的切換按鈕上鼠標(biāo)懸停將會出現(xiàn)當(dāng)前圖片的縮略圖，并沒有炫酷的動畫，總體來講是一款比較實(shí)用的jQuery焦點(diǎn)圖。

在線演示        源碼下載

4、jQuery/CSS3實(shí)現(xiàn)全屏圖片滑塊焦點(diǎn)圖動畫

今天我們要來分享一款非常大氣的jQuery/CSS3全屏焦點(diǎn)圖插件，這款焦點(diǎn)圖有以下幾個特點(diǎn)：首先圖片可以全屏切換滑動，顯得非常大氣；其次焦點(diǎn)圖有縮略圖導(dǎo)航，點(diǎn)擊縮略圖可以切換至相應(yīng)的圖片；最后就是圖片有陰影，配合天空白云的背景，像是浮動一樣，非常立體。

在線演示        源碼下載

5、jQuery圖片垂直滾動焦點(diǎn)圖 導(dǎo)航帶圖標(biāo)

今天我們要再來分享一款很實(shí)用的jQuery焦點(diǎn)圖插件，這款jQuery焦點(diǎn)圖的圖片是垂直分組滾動的，你可以自定義圖片組，也可以定義圖片組中圖片的數(shù)量，鼠標(biāo)滑過指定的導(dǎo)航上時，相應(yīng)的圖片組即可上下切換，另外，焦點(diǎn)圖的切換導(dǎo)航上有小圖標(biāo)，顯得更加美觀。

在線演示        源碼下載

6、jQuery自動輪播圖片焦點(diǎn)圖插件

今天我們要繼續(xù)來分享一款非常實(shí)用的jQuery焦點(diǎn)圖插件，和其他的jQuery焦點(diǎn)圖插件一樣，它同樣支持多張圖片的任意跳轉(zhuǎn)切換，同時，焦點(diǎn)圖切換方式是水平的，而且相當(dāng)流暢，因?yàn)檫@款jQuery焦點(diǎn)圖實(shí)現(xiàn)很簡單。

在線演示        源碼下載

7、簡單實(shí)用的jQuery橫向圖片滾動焦點(diǎn)圖插件

今天的這款jQuery焦點(diǎn)圖插件看起來非常簡單，但是無論從外觀和實(shí)用價值上看都相當(dāng)不錯。這款jQuery焦點(diǎn)圖的圖片是橫向滾動的，兩側(cè)均有左右滑動按鈕。

在線演示        源碼下載

8、jQuery底部帶縮略圖的焦點(diǎn)圖插件

今天我們要介紹的這款jQuery焦點(diǎn)圖插件是帶有縮略圖的，我們只需點(diǎn)擊縮略圖即可切換至相應(yīng)的圖片，圖片切換的時候出現(xiàn)淡入淡出的動畫效果。

在線演示        源碼下載

以上的很多jQuery焦點(diǎn)圖動畫插件都還是挺實(shí)用的，如果你有需要，可以下載源碼并將它們整合到自己的頁面中去，我們將繼續(xù)為大家分享更多的前端開發(fā)資源。

本文鏈接：http://www.codeceo.com/article/8-cool-jquery-slider.html