在jQuery幻燈片中使用插件owlcarousel（詳細教程）-js教程-PHP中文網

在jQuery幻燈片中使用插件owlcarousel（詳細教程）

亚连

發布： 2018-06-04 13:50:24

原創

5268 人瀏覽過

jQuery幻燈片插件owlcarousel是一個小巧強大兼容性強的幻燈片插件，兼容IE6以上所有瀏覽器，本文主要介紹了字的使用方法與中文參數與API說明

Owl Carousel 是一個強大、實用但小巧的jQuery 幻燈片插件，它具有一下特點：

#相容於所有瀏覽器
支援響應式
支援CSS3 過度
支援觸控事件
支援JSON 及自訂JSON 格式
支援進度條
支援自訂事件
支援延遲載入
#支援自適應高度

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

jQuery 相容：相容 1.7 以上版本。

Owl Carousel 使用方法：

新建一個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程式碼

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

登入後複製

3、JavaScript

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

登入後複製

下面是Owl Carousel的中文參數與api說明：

陣列#陣列陣列陣列布林值##itemsScaleUp布林值falseslideSpeed整數200投影片切換速度，以毫秒為單位paginationSpeed整數800分頁切換速度，以毫秒為單位rewindSpeed整數1000重回速度，以毫秒為單位autoPlay布林值/整數false自動播放，可選布林值或整數，若使用整數，如3000，表示3 秒切換一次；若設定為true，預設5 秒切換一次stopOnHover布林值false滑鼠懸停停止自動播放#navigation布林值false顯示「上一個」、「下一個」navigationText陣列[“prev”,”next”]設定「上一個」、「下一個」文字，預設是[“prev”,” next”]rewindNav布林值true#滑動到第一個scrollPerPage布林值false#每頁滾動而不是每個項目滾動pagination布林值true顯示分頁#paginationNumbers布林值false分頁按鈕顯示數字responsive#布林值#true200windowowl-carousel##字串owl-theme主題樣式，可以自行添加以符合你的要求#lazyLoad布林值false 延遲載入lazyFollow布林值true當使用分頁時，如果跨頁瀏覽，將不載入跳過頁面的圖片，只載入要顯示頁面的圖片，如果設定為false，則會載入跳過頁面的圖片。這是lazyLoad 的子選項lazyEffect#布林值/字串fade延遲載入圖片的顯示效果，預設以400 毫秒淡入，若為false 則不使用效果loop布林值falseautoHeight布林值false自動使用高度jsonPath字串falseJSON 檔案路徑#jsonSuccess函數false 處理自訂JSON 格式的函數dragBeforeAnimFinish布林值true#忽略過度是否完成（只限拖曳）mouseDrag布林值true關閉/開啟滑鼠事件margin整數0#投影片間距touchDrag關閉/開啟觸控事件給可見的項目加入「active」類別

參數	類型	預設值
#items	整數	5	投影片每頁可見個數
itemsDesktop	陣列	[1199,4]	設定瀏覽器寬度和投影片可見個數，格式為[X,Y]，X 為瀏覽器寬度，Y 為可見個數，如[1199,4]就是如果瀏覽器寬度小於1199，每頁顯示4 張，此參數主要用於響應式設計。也可以使用false
itemsDesktopSmall	#陣列	[979,3]	同上

			itemsTablet
[768,2]	同上		itemsTabletSmall
false	同上，預設為false		#itemsMobile
[479,1]	同上		itemsCustom
false			singleItem
false	是否只顯示一張












		##responsiveRefreshRate	整數
每200 毫秒偵測視窗寬度並做對應的調整，主要用於響應式		responsiveBaseWidth	jQuery 選擇器
		baseClass	#字串
新增CSS，如果不需要，最好不要使用		theme










		# #布林值	true
	#addClassActive	布林值	false

######transitionStyle#####字串######false######新增CSS3過度效果#############

owlcarousel回呼函數

##說明beforeUpdate函數false回應之後的回呼函數#afterUpdate函數false#回應之前的回呼函數##beforeInit#afterInit##false初始化之後的回呼函數beforeMove函數false在移動之前的回呼函數#afterMove函數false移動之後的回呼函數afterAction#函數false初始化之後的回呼函數startDragging函數false拖曳的回呼函數afterLazyLoad函數false延遲載入之後的回呼函數owlcarousel自訂事件