12款经典图片轮播jquery插件
圖片輪播是網(wǎng)站中的常用功能，用于在有限的網(wǎng)頁(yè)空間內(nèi)展示一組產(chǎn)品圖片或者照片，同時(shí)還有非常吸引人的動(dòng)畫效果。本文向大家推薦12款實(shí)用的?jQuery?圖片輪播效果插件，幫助你在你的項(xiàng)目中加入一些效果精美的圖片輪播效果，希望這些插件能夠幫助到你。
?
Nivo Slider
首先推薦的這款插件號(hào)稱世界上最棒的圖片輪播插件，有獨(dú)立的?jQuery?插件和?WordPress?插件兩個(gè)版本。
目前下載量已經(jīng)突破 1,800,000 次！jQuery 獨(dú)立版本的插件主要有如下特色：
- ? ?16個(gè)獨(dú)特的過(guò)渡效果
- ? ?簡(jiǎn)潔和有效的標(biāo)記
- ? ?加載參數(shù)設(shè)置
- ? ?內(nèi)置方向和導(dǎo)航控制
- ? ?壓縮版本大小只有12KB
- ? ?支持鏈接圖像
- ? ?支持 HTML 標(biāo)題
- ? ?3套精美光滑的主題
- ? ?在MIT許可下免費(fèi)使用
- ? ?支持響應(yīng)式設(shè)計(jì)
?
插件下載? ? ?效果演示
?
3D Image Slider
非常非?？岬?3D 圖片滑動(dòng)效果，有五種絢麗的效果演示。
立體效果是基于?CSS3?實(shí)現(xiàn)的，請(qǐng)使用最新 Chrome，Firefox 和 Safari 瀏覽器瀏覽效果。
對(duì)于不支持 CSS3 的瀏覽器提供了優(yōu)雅的降級(jí)處理，這款插件還有詳細(xì)的制作教程。
?
插件下載? ? ?效果演示
?
Flexslider
FlexSlider 是一款輕量的響應(yīng)式?jQuery?內(nèi)容滾動(dòng)插件，能夠幫助你在項(xiàng)目輕松的創(chuàng)建漂亮的內(nèi)容滾動(dòng)效果。
這款插件也是 2011 年度最佳?jQuery?插件，今年被?WooThemes 收購(gòu)并發(fā)布了2.0版本，因此繼續(xù)入選 2012 年度榜單。
主要特色
- ? ?簡(jiǎn)單的，語(yǔ)義化的標(biāo)簽；
- ? ?支持所有主流的瀏覽器；
- ? ?水平/垂直滑動(dòng)和淡入淡出動(dòng)畫；
- ? ?支持多個(gè)滑塊，回調(diào) API，以及更多；
- ? ?觸摸滑動(dòng)支持硬件加速；
- ? ?能夠自定義導(dǎo)航選項(xiàng)。
- ? ?兼容最新版本的 jQuery。
?
插件下載? ? ?效果演示
?
Elastislide
Elastislide 是一款非常優(yōu)秀的響應(yīng)式?jQuery?幻燈片插件，集成了 Touchwipe 插件以支持觸屏設(shè)備。
提供了四種效果
- ? ?水平圖片傳送帶
- ? ?垂直圖片傳送帶
- ? ?固定在屏幕底部
- ? ?縮略圖形式預(yù)覽
這款插件也有詳細(xì)的制作教程，非常詳細(xì)，可以學(xué)習(xí)到插件的制作方法。
?
插件下載? ? ?效果演示
?
3D Gallery
特別推薦！精致的立體圖片切換效果，特別適合企業(yè)產(chǎn)品展示，可立即用于實(shí)際項(xiàng)目中。
支持導(dǎo)航和自動(dòng)播放功能， 基于?CSS3?實(shí)現(xiàn)，推薦使用最新的 Chrome，Firefox 和 Safari 瀏覽器瀏覽效果。
?
插件下載? ? ?效果演示
?
Image Transitions
基于?jQuery?和?CSS3?動(dòng)畫實(shí)現(xiàn)的圖片過(guò)渡效果。
共有Flip、Rotation、Multi-flip、Cube、Unfold等6種效果。
這款插件有詳細(xì)的制作教程可以參考學(xué)習(xí)。
?
插件下載? ? ?效果演示
?
Slidesjs
Slides 是一個(gè)非常簡(jiǎn)潔的?jQuery?圖片輪播插件，其特點(diǎn)是自動(dòng)循環(huán)播放、圖片預(yù)加載以及自動(dòng)分頁(yè)功能。
使用示例
- ? ?Images with captions
- ? ?Linking
- ? ?Product
- ? ?Multiple slideshows
- ? ?Simple (unstyled)
- ? ?Standard
?
下載插件?????效果演示
?
Galleria
這是一個(gè)響應(yīng)式的?JavaScript?相冊(cè)插件，目的是讓制作專業(yè)相冊(cè)功能變得更加簡(jiǎn)單。
Galleria 支持縮略圖導(dǎo)航、全屏瀏覽和自動(dòng)播放功能，支持 iPhone，iPad Touch 等移動(dòng)觸屏設(shè)備。
?
下載插件?????效果演示
?
AnythingSlider
AnythingSlider 由CSS-Tricks 的Chris Coyier 設(shè)計(jì)，功能齊全，效果精美，應(yīng)用十分廣泛。
主要特色
- ? ?簡(jiǎn)單的，語(yǔ)義化的標(biāo)簽；
- ? ?水平/垂直滑動(dòng)和淡入淡出動(dòng)畫；
- ? ?主題可以適用于單個(gè)滑塊；
- ? ?同一個(gè)頁(yè)面可以顯示多個(gè)滑動(dòng)模塊；
- ? ?提供了豐富的自定義參數(shù)選項(xiàng)。
- ? ?支持所有主流的瀏覽器；
?
下載插件?????效果演示
?
WOW Slider
這是另外一款效果精美的響應(yīng)式圖片輪播插件，有眾多專業(yè)的模板。
提供了?Rotate,Blur,?Flip,?Blast,?Fly,?Blinds,?Squares,?Slices,?Basic,?Fade?等精美的輪播效果。
?
下載插件?????效果演示
?
An HTML5 Slideshow
基于 HTML5 Canvas 和?jQuery?制作的圖片幻燈片效果，有詳細(xì)的制作教程可以學(xué)習(xí)。
詳細(xì)的制作教程和實(shí)現(xiàn)思路參考這里，An HTML5 Slideshow With Canvas & jQuery。
?
下載插件?????效果演示
?
Awkward Showcase
提供常見的圖片輪播效果，可以前后切換，也可以通過(guò)頁(yè)碼導(dǎo)航，能夠在一頁(yè)上顯示也可以幻燈片形式顯示。
效果演示
- ? ?Normal
- ? ?Vertical thumnbails
- ? ?Horizontal thumbnails
- ? ?Dynamic height
- ? ?Hundred percent
- ? ?Viewline
?
下載插件?????效果演示
總結(jié)
以上是生活随笔為你收集整理的12款经典图片轮播jquery插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： HTML的dl、dt、dd标记制作表格对
- 下一篇： html table相关标签和属性