DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 分享十五個最佳jQuery 幻燈插件和教程
分享十五個最佳jQuery 幻燈插件和教程
編輯:JQuery特效代碼     

幻燈(通常也被稱為“內容滑動”、內容切換效果、焦點圖等)是在網站或博客的較小區域展示大量內容的很好的方法。動態的自動滑動內容在很多網站上都是很流行的。你是否也對在自己的網站上實現類似的效果感興趣?那就看一下本文列出的jQuery插件吧!
1. jFlow

官方網站 | 演示

一個漂亮而整潔的圖片幻燈,被nettut推薦,如果你想自己做一個圖片幻燈效果,就去看看吧。

jFlow

2. 使用jQuery UI實現推薦內容的幻燈展示

官方網站

這是一個教你如何“使用一種很有沖擊力的方法展示你的網站/博客的最佳內容以吸引更多眼球”的很不錯的教程。該文章介紹展示推薦內容的技術中的一個是自動播放內容幻燈。

3. 創建漂亮的jQuery幻燈教程

官方網站 | 演示

該教程介紹如何開發/創建漂亮的使用圖片描述和名稱的jQuery幻燈。

Create Beautiful jQuery sliders tutorial

4. 基於jQuery的一個簡單的內容幻燈效果

官方網站 | 演示

Brenelz的網站開發技巧的一個簡單的內容幻燈效果。

A Basic Content Slider With jQuery

5. JC Play List

官方網站 | 演示

免費而好用的使用Flash組件創建的一個jQuery幻燈插件,特別是對XML、RSS2.0、Picasa和Flickr等多媒體列表等非常方便。

JC Play List

6. Easy Slider

官方網站 | 演示

一個JQuery插件,允許圖片或任何內容在點擊的時候水平/垂直滑動。

Easy Slider

7.jqGalScroll

官方網站

jQuery Gallery Scroller (jqGalScroll)使用圖片列表,並創建一個光滑的可以垂直、水平或對角滾動的圖片相冊。該插件同樣能創建分頁,從而你就可以輕松的浏覽你的照片了。

 jqGalScroll

8. Image Gallery

官方網站

這個一點兒都不復雜——它是一個非常簡單的圖片畫廊/查看器。你可以像這樣調用圖片:

Image Gallery

9.使用jQuery UI 制作內容幻燈

官方網站 | 演示

Dan Wellman為NetTuts寫的教程,很詳細。

Making a Content Slider with jQuery UI

10. 創建一個自動播放的推薦內容幻燈

官方網站 | 演示

來自CSS-Tricks的Chris Coyier 寫的一篇教程。該腳本基於Coda Slider。它包含一些擴展的特性:

Creating a Slick Auto-Playing Featured Content Slider

11. slideViewer

官方網站

SlideViewer是一個輕量的(1.5Kb)jQuery插件,它可以讓你隨時通過編寫幾行HTML代碼來創建一個圖片畫廊.

slideViewer

12. Start/Stop Slider

官方網站 | 演示

Start/Stop Slider

13. 一個簡約的jQuery插件

官方網站 | 演示

WebDesignBooth的一個教程,介紹如何使用強大的jQuery庫創建簡單的內容幻燈效果。

A Minimalist jQuery Plugin

14. BarackSlideshow

官方網站 | 演示

一個灰常小巧和輕量的幻燈腳本,靈感來自於美國總統Baracka Obama網站的一個幻燈效果。該腳本獲取MorphList的能力,並增強圖片的可視化和導航。

BarackSlideshow

15. 使用JQuery s3Slider的wordpress模板

官方網站 | 演示

在WP中使用JQuery s3Slider插件來創建幻燈內容。

Wordpress Theme using JQuery s3Slider

其實,jQuery的幻燈插件並不只這些,還有CodaSlider、JQuery Cycle Plugin等,當然有些只只能用在圖片的,而大部分是可用於內容的。

更多的可以參考 http://www.jb51.net/jiaoben/list374_1.html

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved