一套非常全面新的jQuery圖片畫廊和滑塊

jopen 12年前發布 | 65K 次閱讀 jQuery

Adaptor

Adaptor Query content slider

Adaptor是一個輕量級的圖片/內容滑動播放插件,旨在為開發者提供一個簡單的接口來創建超酷的2D或3D滑動過渡效果。
目前該插件的3D效果只支持基于webkit的瀏覽器和Firefox,其他瀏覽器查看3D效果時將使用一個簡單的淡入淡出效果代替。經過測試,2D效果在IE6+和其他所有現代瀏覽器中均可以正常顯示。

該插件提供了6種效果:

  • Vertical 3D scroll:垂直3D翻轉過渡效果
  • Horizontal 3D scroll:水平3D翻轉過渡效果
  • Vertical scroll:垂直滑動過渡效果
  • Horizontal scroll:水平滑動過渡效果
  • Blind left:水平百葉窗切換效果
  • Blind down:垂直百葉窗切換效果
  • Fade:淡入淡出效果

iView

iView

iView Slider 是一個jQuery Slider 插件可用于展示任意類型的內容(圖片,HTML,視頻)。

這個插件支持響應式布局并能夠很好的兼容觸摸界面。

它已經內置35種轉換效果,可以為每一個slide可以定義不同的效果。

iView Slider 提供動畫HTML標題,還支持一些效果(fade, move top, move right…) 并擁有多種方式來瀏覽幻燈片:

  • slideshow (optional "pause on hover")
  • keyboard
  • prev-next buttons
  • thumbnails
  • bullets

它擁有三種不同的加載條來指示下一張幻燈片加載時間。

此外,還有一個API,可以通過JavaScript來控制功能。

 

JZoopraxiscope

JZoopraxiscope

JZoopraxiscope是一個 jQuery插件,靈感來自于第一臺電影投影機。除了 jQuery,同時也使用了 jQuery UI并要求所有的幀都是水平放置的單一圖片中。你只需要通過調用一個定義圖片尺寸和幀的方法就可以讓它開始正常工作了。 JZoopraxiscope 還提供了播放和停止按鈕。雖然聽起來比較復雜,但是只要你有足夠多的靈感和創造力,你能將它發揮到極致。使用它不僅美化了你的頁面,還更加的更突出了你的web頁面內容和效果。

Really Simple? Slideshow

Really Simple? Slideshow

Really Simple Slideshow是一個用于創建各種幻燈圖片的jQuery插件。這款插件可以將任何圖片轉換到幻燈片列表中,并可以為每個幻燈顯示字幕,包括它們的鏈接和多種過渡效果。

Camera

Camera

Sequence

Sequence

Sequence 是一個jQuery的幻燈插件,使用無限滾動。提供完整的幻燈功能。和普通幻燈的顯示方式與眾不同

Rhinoslider

Rhinoslider

Rhinoslider 是一個非常靈活的jQuery slider插件,能夠展示任意HTML元素包括:文本、圖片和視頻等

這個插件自帶大最的切換效果,利用其提供的可擴展構架,新的效果和樣式都很容易增加。

也有很多選項可以設置包括:是否自動播放,播放方向,隨機播放和手動導航。

 

RefineSlide

RefineSlide

RefineSlide是一個輕量級(4KB壓縮)的jQuery插件快速整合一個響應式的、基于圖像滑塊的效果到我們的網站。滑塊使用CSS3轉換+ 3D變換(有JS備用)和有一堆有吸引力的轉變。它有一個選項,以顯示縮略圖(自動格式化和響應)或箭頭的導航(支持鍵盤操作)。

Skitter

Skitter

Diapo

Diapo

Diapo 是一個開源的 jQuery 幻燈效果、圖片展示插件。

Flickrshow 7.2

Flickrshow 7.2

Flickrshow是一個非常簡單的Javascript slideshow。

TimelineJS

TimelineJS

Timeline 是我見過的最酷的展示事件隨時間發展的javascript實現。你可以基于時間使用講故事的方式來創建時間軸特效,整個時間軸以幻燈的方式來展示,你可以穿插圖片,視頻或者是網站,而且擁有非常華麗的動畫效果和縮略圖效果,非常適合做網站的關于我們功能。

 

PhotoShow

photoShow

PhotoShow 是一個免費,開源,非常易于使用的Web gallery。可以安裝在任何web服務器上

bgStretcher

bgStretcher

bgStretcher是一款jQuery插件,專門用于針對網頁的背景圖片進行切換,能夠像普通的slideshow一樣操作背景圖(css background-image),同時兼容幾乎所有的桌面瀏覽器。

 

Revolver.js

Revolver.js

如果你想要實現一個完全自定義的幻燈插件,不妨試試 Revolver.js, 它對于高度定制化的幻燈功能來說是個不錯的選擇。

Revolver.js 支持 jQuery 和 MooTools。它提供的功能基本涵蓋幻燈功能的大多數常用特性。

 

Swipe

Swipe

PhotoSwipe 是一個適合在觸摸屏手機上使用的相冊展示包。


Flow Slider

Flow Slider

Flow Slider是一個jQuery圖像滑塊插件,擺脫了通過Flash去實現效果,靈活性非常強,你可以自定義皮膚與樣式,官方也提供了三種默認的皮膚,本站下載文檔里面都包含了,大家可以下載研究。Flow Slider提供了差不多23種滑塊切換效果,水平方向、垂直方向、鼠標控制左右滾動等等效果。

 

Craftyslide

Craftyslide

現今已經有大量的jQuery slider插件,這些插件擁有漂亮的外觀和非常多的功能,但往往體積比較龐大。
Craftyslide是一個jQuery image slider 插件,非常適合于創建一個標準,功能夠用的Slider。可以為展示的圖片設置標題,它擁有一個箭頭導航,向上/向下翻頁按紐。使用淡入淡出切換圖片。
整個插件只有20kb,并支持所有主流瀏覽器。

 

Mosaiqy

Mosaiqy

一個很給力的圖片相冊插件Mosaiqy,它是一個以馬塞克網格界面來展示圖片的jQuery插件,在網格里以縮略圖隨機顯示。

此插件用到了CSS3的變換(transition)效果,網格的行列會定時的滾動。當點擊縮略圖的時候,將會在網格中顯示大圖,同時會有淡入淡出的效果。

它以JSON/JSONP為數據源,可以很容易的和一些圖床整合。除此之外,它也具有很高的可定制性,可設置滾動速度,行列數量等等。

 

Fotorama

Fotorama 是一個高度靈活的圖片集展示jQuery插件。支持桌面和移動瀏覽器。Fotorama

Minimit Gallery

Minimit Gallery

Minimit Gallery 是一個可高度定制的 jQuery 插件,用于顯示相冊、幻燈片、卷簾等效果。

 

Slider.js

Slider.js

Slider.js 是一個圖片播放Slideshow引擎,采用jQuery、CSS3和HTML5 canvas技術實現。 可以為播放的條目設置文本標題并帶鏈接,用戶可以通過分頁碼或向前/向后鏈接進行瀏覽。 展示界面和交互都可以定制。

其數據源是JSON格式。除了有13種CSS轉換效果之外,還內置10種好看的Canvas功能。

 

Slidorion

Slidorion

 Slidorion是一個簡單易用且輕量級的jQuery圖片幻燈插件,它是以幻燈片的形式展示圖片,同時以手風琴效果展示與圖片相關聯的文字內容。此插件內置了多種圖片切換效果,如淡入淡出、左右切換、上下切換等。

Slidorion的定制性也相當高,通過參數的設置可以控制初始顯示的幻燈、自動播放、鼠標懸停等。除此之外,還可以自定義設置幻燈片的切換速度和停留時間。

Basic jQuery Slider

Basic jQuery Slider

Basic jQuery Slider 是一個輕量級的很簡潔的 jQuery 內容滑動插件,經壓縮后也僅有4.6kb大小。它能用來展示文字、圖片等任意的 HTML 內容。此插件并沒有太多花哨的功能,僅包含一些基礎的功能,實現了 fade 和 slide 兩種動畫切換效果。除了使用按鈕的導航方式外,它還支持使用鍵盤控制。此插件最大的特點是支持自定義主題樣式,完全可以打造出很漂亮的效果來。

 

Flux Slider

Flux Slider

Flux slider是一個基于CSS3動畫技術的圖片切換過度框架,靈感源于Nivo Slider jQuery插件。它采用最新,更強大的CSS3動畫技術來代替傳統基于Javascript Timer的動畫實現方式。

Flexslider

Flexslider

FlexSlider是一個輕量級的jQuery內容滾動插件,壓縮后只有4KB大小。它能讓你輕松的創建內容滾動的效果,具有非常高的可定制性。它是將UL列表轉換成內容滾動的列表,可以自動播放,或者使用導航按鈕和鍵盤來控制。


dualSlider

dualSlider
dualSlider是一個jQuery內容Slider插件,可用于播放任意HTML輸出。它擁有一個漂亮的功能,就是播放容器有兩邊,一邊是要播放的主要內容,別一邊是播放內容的額外說明信息,兩邊會同步切換展示。支持手動和自動播放兩種模式。

The Wall

The Wall

The Wall enables to create an endless grid. You choose the number of elements, The Wall will see to the rest.

Awkward Showcase

Awkward Showcase

這是一個簡單的jQuery插件能夠在一條直線上展示任何類型的媒體。比如它可以用于在整個瀏覽器寬度范圍內展示一個產品線。

PhotoSwipe

PhotoSwipe

PhotoSwipe是一個開發用于手機和Touch設備,功能強大的圖片/照片集展示控件。它采用HTML、CSS+JavaScript實現,沒有依賴任何JavaScript框架。

可以設置淡入/淡出的效果,激活放大功能,縮放圖片等。PhotoSwipe支持的設備包括:iPhone、iPad、Android、Blackberry和桌面瀏覽器。它還有一個可選基于jQuery實現的版本。

MooTools SlideShow

MooTools SlideShow

采用Mootools開發的圖片Slideshow控件。提供淡入淡出圖片切換效果,控制圖片播放、停止、向前、向后。

jShowOff: a jQuery Content Rotator

jShowOff: a jQuery Content Rotator

jShowOff是一個靈活的jQuery插件用于輪流播放任意類型的HTML內容。可以設置是否自動播放,變換速度,控制關閉/打開,變換效果等。提供分頁、向前/向后按紐、縮略圖導航。

 

SlidesJS

SlidesJS

一個不錯的jQuery幻燈片插件Slides.Js,壓縮后腳本只有7K,卻可以實現多種幻燈片特效,例如jCarousel特效、類似Nivo Slider的效果,還可以用作產品展示。

 

Sliderman.js

Sliderman.js

Sliderman.js是一個單獨的JavaScript library用于創建高度可定制圖片播放器。它擁有25種獨特,優秀的效果。可以單獨使用,也可以隨機混合使用。提供兩種導航方式:向前和向后按紐與分頁導航。每一張圖片可以有描述說明,當鼠標移過時顯示,Sliderman.js可以讓你定制背景顏色,透明度,自動播放等。

Simple jQuery hash-slider

simple jquery hash-slider

Hash Slider是一個能夠展示任意內容的jQuery slider插件。它能夠一個無序的列表轉換成一個好看Slider。

Choco-Slider

Choco-Slider
Choco-Slider是一個輕量級(大約7kb),靈活的jQuery圖片Slider插件。擁有好看的效果。這個插件有多個選項可以自定義包括:尺寸,自動滑開/關,轉換之間的延遲,后退,下一個控制開/關等。Choco-Slider提供三種可定制的動畫,并支持大部分瀏覽器包括IE6。

jQuery.carouFredSel

jQuery.carouFredSel

支持自定義樣式并且靈活健壯的jQuery旋轉輪播插件:CarouFredSel ,能夠幫助你迅速的構建一個輪播式的幻燈展示,使用簡單,功能強大,可以展示任何類型的HTML元素。支持水平和垂直兩個方向。項目的高度和寬度可以不相同。可以動態從容器中刪除/添加項目,可以利用向前/向后按紐播放項目或設置成自動播放。

主要特性:

    支持完整自定義和皮膚
    支持responsive/fluid/liquid,保證各種客戶端的顯示
    支持可變的顯示項目個數
    支持鍵盤和鼠標導航
    7個內建的效果: none, scroll, directscroll, fade, crossfade, cover and uncover.
    內建自定義的智能事件和加載選項
    定義的高和寬中保證顯示項目對齊(左/中/右).
    支持動態添加和刪除顯示項目
    幻燈創建后也可以支持獲取,重置或者設置配置選項

Open資訊整理

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!