PgwSlideshow是一款非常實用的響應式、支持觸摸屏的jQuery輪播圖插件。該輪播圖插件帶有縮略圖預覽效果，可以根據容器的大小自適應圖片的寬度。你也可以自定義輪播圖的高度，圖片寬度會根據高度等比例匹配。該輪播圖插件的特點有：

響應式設計

支持桌面和移動手機設備

輕量級，壓縮后只有4kb

可以通過CSS來自定義輪播圖的樣式

使用方法

該輪播圖插件依賴于jQuery(1.0以上版本)或Zepto(1.0以上版本)。使用前要移入這些依賴文件。

HTML結構

該輪播圖插件的基本HTML結構使用的是無序列表

• 。你可以添加多個
• 元素，每一個
• 元素中包含一張用于輪播的圖片。

  ......

alt：這個屬性定義圖片的標題，它會在圖片顯示的時候作為標題顯示。

data-description：該屬性會在圖片標題下方添加一行新的文本，用于額外的描述信息。

data-large-src：如果你希望縮略圖使用小尺寸的圖片，顯示的是大尺寸的圖片，就可以使用data-large-src屬性來指定大尺寸圖片的URL。

另外，如果你希望某張圖片鏈接到特定的URL，可以使用標簽來包裹圖片，每張圖片都可以單獨設置它的對應鏈接地址。

調用插件

$(document).ready(function() {

$('.pgwSlideshow').pgwSlideshow();

});

配置參數

下面是該輪播圖插件的一些可用的參數。

參數

類型

默認值

描述

mainClassName

String

'pgwSlideshow'

該參數會覆蓋輪播圖默認的CSS class名稱。

transitionEffect

String

'sliding'

有兩個可用的過渡效果："sliding" 和 "fading"

autoSlide

Boolean

false

是否允許輪播圖自動輪播

beforeSlide

Function

false

在輪播圖每次切換時的回調函數。eg:"function(id) { console.log('Before sliding - The current slide is ' + id); }"

afterSlide

Function

false

在輪播圖每次切換之后的回調函數。eg:"function(id) { console.log('After sliding - The current slide is ' + id); }"

displayList

Boolean

true

是否以列表的形式顯示縮略圖

displayControls

Boolean

true

是否顯示前后箭頭導航按鈕

touchControls

Boolean

true

是否綁定移動觸摸事件

maxHeight

Integer

null

為輪播圖設置固定的高度。不用帶"px"單位

adaptiveDuration

Integer

200

This duration is the period in milliseconds, during the adjustment of the previous option runs (if it is activated).

transitionDuration

Integer

500

圖片切換的時間，單位毫秒

intervalDuration

Integer

3000

顯示下一張圖片之前的間隔時間，該參數需要autoSlide為true

方法

下面是該輪播圖插件的一些可用方法。

要使用這些方法，必須在輪播圖插件初始化時將它保存為一個對象變量。

var pgwSlideshow = $('.pgwSlideshow').pgwSlideshow();

startSlide：輪播圖開始播放。

pgwSlideshow.startSlide();

stopSlide：停止輪播圖的播放。

pgwSlideshow.stopSlide();

getCurrentSlide：返回當前輪播圖片的序號。

pgwSlideshow.getCurrentSlide();

getSlideCount：返回輪播圖中圖片的總數。

pgwSlideshow.getSlideCount();

displaySlide：通過參數中的數值來顯示指定序號的輪播圖圖片。

pgwSlideshow.displaySlide(3);

nextSlide：顯示下一幅圖片。

pgwSlideshow.nextSlide();

previousSlide：顯示前一幅圖片。

pgwSlideshow.previousSlide();

destroy：銷毀輪播圖對象。如果傳入參數true，那么容器將只是被隱藏起來。

pgwSlideshow.destroy();

reload：使用新的配置參數來重新加載輪播圖插件。

pgwSlideshow.reload({

transitionEffect : 'fading',

adaptiveDuration : 4000

});

總結

以上是生活随笔為你收集整理的android 图片轮播带缩略图,超酷响应式带缩略图的jQuery轮播图插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。