jQuery幻燈片插件Owl Carousel插件

版權聲明：本文為部落客原創文章，未經部落客允許不得轉載。 https://blog.csdn.net/w178191520/article/details/84179419

簡介

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

• 相容所有浏覽器
• 支援響應式
• 支援 CSS3 過度
• 支援觸摸事件
• 支援 JSON 及自定義 JSON 格式
• 支援進度條
• 支援自定義事件
• 支援延遲加載
• 支援自适應高度

相容

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

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

線上示範及下載下傳

線上示範：

http://www.jqhtml.com/wp-content/uploads/2017/05/wz/Owl Carousel/ 下載下傳頁面

使用方法

引入檔案

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

           

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>

           

JavaScript

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

           

參數

	類型	預設值	說明
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
singleItem	布爾值		是否隻顯示一張
itemsScaleUp
slideSpeed		200	幻燈片切換速度，以毫秒為機關
paginationSpeed		800	分頁切換速度，以毫秒為機關
rewindSpeed		1000	重回速度，以毫秒為機關
autoPlay	布爾值/整數		自動播放，可選布爾值或整數，若使用整數，如 3000，表示 3 秒切換一次；若設定為 true，預設 5 秒切換一次
stopOnHover			滑鼠懸停停止自動播放
navigation			顯示“上一個”、“下一個”
navigationText		[“prev”,”next”]	設定“上一個”、“下一個”文字，預設是[“prev”,”next”]
rewindNav		true	滑動到第一個
scrollPerPage			每頁滾動而不是每個項目滾動
pagination			顯示分頁
paginationNumbers			分頁按鈕顯示數字
responsive
responsiveRefreshRate			每 200 毫秒檢測視窗寬度并做相應的調整，主要用于響應式
responsiveBaseWidth	jQuery 選擇器	window
baseClass	字元串	owl-carousel	添加 CSS，如果不需要，最好不要使用
theme		owl-theme	主題樣式，可以自行添加以符合你的要求
lazyLoad			延遲加載
lazyFollow			當使用分頁時，如果跨頁浏覽，将不加載跳過頁面的圖檔，隻加載所要顯示頁面的圖檔，如果設定為 false，則會加載跳過頁面的圖檔。這是 lazyLoad 的子選項
lazyEffect	布爾值/字元串	fade	延遲加載圖檔的顯示效果，預設以 400 毫秒淡入，若為 false 則不使用效果
autoHeight			自動使用高度
jsonPath			JSON 檔案路徑
jsonSuccess	函數		處理自定義 JSON 格式的函數
dragBeforeAnimFinish			忽略過度是否完成（隻限拖動）
mouseDrag			關閉/開啟滑鼠事件
touchDrag			關閉/開啟觸摸事件
addClassActive			給可見的項目加入 “active” 類
transitionStyle			添加 CSS3 過度效果

回調函數

變量
beforeUpdate			響應之後的回調函數
afterUpdate			響應之前的回調函數
beforeInit			初始化之前的回調函數
afterInit			初始化之後的回調函數
beforeMove			移動之前的回調函數
afterMove			移動之後的回調函數
afterAction
startDragging			拖動的回調函數
afterLazyLoad			延遲加載之後的回調函數

自定義事件

事件
owl.prev	到上一個
owl.next	到下一個
owl.play	自動播放，可傳遞一個參數作為播放速度
owl.stop	停止自動播放
owl.goTo	跳到第幾個
owl.jumpTo	不使用動畫跳到第幾個