jQuery幻燈片插件owlcarousel參數(shù)的示例分析

發(fā)布時(shí)間：2021-06-15 14:09:58 來(lái)源：億速云閱讀：147 作者：小新欄目：web開發(fā)

這篇文章主要介紹jQuery幻燈片插件owlcarousel參數(shù)的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

Owl Carousel 是一個(gè)強(qiáng)大、實(shí)用但小巧的 jQuery 幻燈片插件，它具有一下特點(diǎn)：

兼容所有瀏覽器
支持響應(yīng)式
支持 CSS3 過(guò)度
支持觸摸事件
支持 JSON 及自定義 JSON 格式
支持進(jìn)度條
支持自定義事件
支持延遲加載
支持自適應(yīng)高度

瀏覽器兼容：兼容所有瀏覽器，包括 IE6、IE7。

jQuery 兼容：兼容 1.7 及以上版本。

Owl Carousel 使用方法：

新建一個(gè)HTML文件

1、在HTML文件中引入Owl Carousel必須文件

<link href="css/owl.carousel.css" rel="external nofollow" rel="stylesheet">
<link href="css/owl.theme.css" rel="external nofollow" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/owl.carousel.js"></script>

2、HTML代碼

<div id="owl-demo" class="owl-carousel">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
 <div>7</div>
 <div>8</div>
</div>

3、JavaScript

$(function(){
 $('#owl-example').owlCarousel();
});

下面是Owl Carousel的中文參數(shù)與api說(shuō)明：

參數(shù)	類型	默認(rèn)值	說(shuō)明
items	整數(shù)	5	幻燈片每頁(yè)可見個(gè)數(shù)
itemsDesktop	數(shù)組	[1199,4]	設(shè)置瀏覽器寬度和幻燈片可見個(gè)數(shù)，格式為[X,Y]，X 為瀏覽器寬度，Y 為可見個(gè)數(shù)，如[1199,4]就是如果瀏覽器寬度小于1199，每頁(yè)顯示 4 張，此參數(shù)主要用于響應(yīng)式設(shè)計(jì)。也可以使用 false
itemsDesktopSmall	數(shù)組	[979,3]	同上
itemsTablet	數(shù)組	[768,2]	同上
itemsTabletSmall	數(shù)組	false	同上，默認(rèn)為 false
itemsMobile	數(shù)組	[479,1]	同上
itemsCustom	數(shù)組	false
singleItem	布爾值	false	是否只顯示一張
itemsScaleUp	布爾值	false
slideSpeed	整數(shù)	200	幻燈片切換速度，以毫秒為單位
paginationSpeed	整數(shù)	800	分頁(yè)切換速度，以毫秒為單位
rewindSpeed	整數(shù)	1000	重回速度，以毫秒為單位
autoPlay	布爾值/整數(shù)	false	自動(dòng)播放，可選布爾值或整數(shù)，若使用整數(shù)，如 3000，表示 3 秒切換一次；若設(shè)置為 true，默認(rèn) 5 秒切換一次
stopOnHover	布爾值	false	鼠標(biāo)懸停停止自動(dòng)播放
navigation	布爾值	false	顯示“上一個(gè)”、“下一個(gè)”
navigationText	數(shù)組	[“prev”,”next”]	設(shè)置“上一個(gè)”、“下一個(gè)”文字，默認(rèn)是[“prev”,”next”]
rewindNav	布爾值	true	滑動(dòng)到第一個(gè)
scrollPerPage	布爾值	false	每頁(yè)滾動(dòng)而不是每個(gè)項(xiàng)目滾動(dòng)
pagination	布爾值	true	顯示分頁(yè)
paginationNumbers	布爾值	false	分頁(yè)按鈕顯示數(shù)字
responsive	布爾值	true
responsiveRefreshRate	整數(shù)	200	每 200 毫秒檢測(cè)窗口寬度并做相應(yīng)的調(diào)整，主要用于響應(yīng)式
responsiveBaseWidth	jQuery 選擇器	window
baseClass	字符串	owl-carousel	添加 CSS，如果不需要，最好不要使用
theme	字符串	owl-theme	主題樣式，可以自行添加以符合你的要求
lazyLoad	布爾值	false	延遲加載
lazyFollow	布爾值	true	當(dāng)使用分頁(yè)時(shí)，如果跨頁(yè)瀏覽，將不加載跳過(guò)頁(yè)面的圖片，只加載所要顯示頁(yè)面的圖片，如果設(shè)置為 false，則會(huì)加載跳過(guò)頁(yè)面的圖片。這是 lazyLoad 的子選項(xiàng)
lazyEffect	布爾值/字符串	fade	延遲加載圖片的顯示效果，默認(rèn)以 400 毫秒淡入，若為 false 則不使用效果
loop	布爾值	false	無(wú)限循環(huán)
autoHeight	布爾值	false	自動(dòng)使用高度
jsonPath	字符串	false	JSON 文件路徑
jsonSuccess	函數(shù)	false	處理自定義 JSON 格式的函數(shù)
dragBeforeAnimFinish	布爾值	true	忽略過(guò)度是否完成（只限拖動(dòng)）
mouseDrag	布爾值	true	關(guān)閉/開啟鼠標(biāo)事件
margin	整數(shù)	0	幻燈片間距
touchDrag	布爾值	true	關(guān)閉/開啟觸摸事件
addClassActive	布爾值	false	給可見的項(xiàng)目加入 “active” 類
transitionStyle	字符串	false	添加 CSS3 過(guò)度效果

owlcarousel回調(diào)函數(shù)

變量	類型	默認(rèn)值	說(shuō)明
beforeUpdate	函數(shù)	false	響應(yīng)之后的回調(diào)函數(shù)
afterUpdate	函數(shù)	false	響應(yīng)之前的回調(diào)函數(shù)
beforeInit	函數(shù)	false	初始化之前的回調(diào)函數(shù)
afterInit	函數(shù)	false	初始化之后的回調(diào)函數(shù)
beforeMove	函數(shù)	false	移動(dòng)之前的回調(diào)函數(shù)
afterMove	函數(shù)	false	移動(dòng)之后的回調(diào)函數(shù)
afterAction	函數(shù)	false	初始化之后的回調(diào)函數(shù)
startDragging	函數(shù)	false	拖動(dòng)的回調(diào)函數(shù)
afterLazyLoad	函數(shù)	false	延遲加載之后的回調(diào)函數(shù)

owlcarousel自定義事件

事件	說(shuō)明
owl.prev	到上一個(gè)
owl.next	到下一個(gè)
owl.play	自動(dòng)播放，可傳遞一個(gè)參數(shù)作為播放速度
owl.stop	停止自動(dòng)播放
owl.goTo	跳到第幾個(gè)
owl.jumpTo	不使用動(dòng)畫跳到第幾個(gè)

以上是“jQuery幻燈片插件owlcarousel參數(shù)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

jQuery幻燈片插件owlcarousel參數(shù)的示例分析

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽