插件描述：該插件基于jquery開發(fā)，現(xiàn)階段很多PC網(wǎng)站都需要用到輪播圖切換的效果

全屏輪播圖

該插件基于jquery開發(fā)，現(xiàn)階段很多PC網(wǎng)站都需要用到輪播圖切換的效果，很多時候要在頁面中復(fù)用輪播圖，而且對于PC用戶而言，IE8+用戶居多，需要做一個兼容該用戶群體的全屏輪播圖，同時也可以通過參數(shù)設(shè)置來把該幻燈片設(shè)置為非全屏復(fù)用多個位置。這時候該插件便應(yīng)運而生。可以通過簡單的調(diào)用及樣式來對其進行調(diào)用，從而完成快速開發(fā)的過程。該模塊并非只能是輪播圖，輪播圖條目區(qū)域可以放上文字列表、圖片等任意內(nèi)容，這塊在于你自己選擇。接下來對該插件進行一個

方法調(diào)用

現(xiàn)在對方法調(diào)用進行一個簡單的解析，后面再就函數(shù)進行具體的解析。

html

這里是文本存放位置這里是文本存放位置

js//?默認

$('.slide-box-demo').setSlide()

參數(shù)解析參數(shù)類型說明示例值

$(this)DOM當前輪播圖($('.slide-box'))外層的包裹的DOM節(jié)點，可自定義標簽，Dom節(jié)點操作沿襲jquery的Dom節(jié)點操作。詳見demo$("#demo").setSlide()

isBlockboolean(非必填)定義幻燈片是否為塊狀展示該幻燈片。默認為falsetrue

fullScreenwboolean(非必填)寬度完全全屏，輪播圖寬度為整個屏幕寬度。注意：當設(shè)置該參數(shù)為true時，slideLiw參數(shù)無效。默認為falsetrue

fullScreenhboolean(非必填)高度完全全屏，輪播圖高度為整個屏幕高度。注意：當設(shè)置該參數(shù)為true時，slideLih參數(shù)無效。默認為falsetrue

switchingSpeednumber(非必填)定義輪播圖切換速度的毫秒數(shù)。如若為空，默認自動播放時間為600毫秒800

slideTimenumber(非必填)定義輪播圖自動播放的毫秒數(shù)，只有開啟autoPlay屬性時有效。如若為空，默認自動播放時間為3000毫秒2000

autoPlayboolean(非必填)是否自動切換，默認為falsetrue

prevElDOM(非必填)點擊輪播圖切換到上一張，可自定義標簽，Dom節(jié)點操作沿襲jquery的Dom節(jié)點操作，默認為$('#slide-button-prev')。注意：如若使用默認標簽，id只能單次調(diào)用。如果第一張操作時候便跳到最后一張。默認上一頁樣式：

nextElDOM(非必填)點擊輪播圖切換到下一張，可自定義標簽，Dom節(jié)點操作沿襲jquery的Dom節(jié)點操作，默認為$('#slide-button-next')。注意：如若使用默認標簽，id只能單次調(diào)用。如果最后一張操作時候便跳到第一張。默認下一頁樣式：

paginationboolean(非必填)是否使用分頁導(dǎo)航，只有開啟autoPlay屬性時有效。默認為falsetrue

pagingTriggerstring(非必填)分頁導(dǎo)航指示器的觸發(fā)事件，默認為click'hover'

slideLiwnumber(非必填)設(shè)定輪播容器寬度，默認單位為px，無需加單位。默認為12001000

slideLihnumber(非必填)設(shè)定輪播容器高度，默認單位為px，無需加單位。默認為600500

fnObject(非必填) 回調(diào)函數(shù)，可以在當輪播圖切換時，拿到當前輪播圖的索引值并在該時刻進行回調(diào)的操作。與一般函數(shù)寫法相同，索引值可傳可不傳。function(index) {} 或 function() {}

demo演示

對于上面所做的解析，如果還有不明白的話，不用擔心，就上面的參數(shù)提供了demo進行解析，讓你快速開發(fā)你想要的輪播圖。下面為相關(guān)demo的地址：默認調(diào)用01-default

上下頁切換調(diào)用02-navigation.html

分頁調(diào)用03-pagination.html

自動播放04-autoplay.html

自定義寬高05-widthAndheightSetting.html

塊狀展示06-block-display.html

寬高完全全屏07-fullscreen.html

回調(diào)函數(shù)08-callback.html

總結(jié)

以上是生活随笔為你收集整理的html中轮换图片插件,jQuery轮播图插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。