1. 程式人生 > >jQuery幻燈片外掛Owl Carousel外掛

jQuery幻燈片外掛Owl Carousel外掛

簡介

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 陣列 false
singleItem 布林值 false 是否只顯示一張
itemsScaleUp 布林值 false
slideSpeed 整數 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 布林值 true
responsiveRefreshRate 整數 200 每 200 毫秒檢測視窗寬度並做相應的調整,主要用於響應式
responsiveBaseWidth jQuery 選擇器 window
baseClass 字串 owl-carousel 新增 CSS,如果不需要,最好不要使用
theme 字串 owl-theme 主題樣式,可以自行新增以符合你的要求
lazyLoad 布林值 false 延遲載入
lazyFollow 布林值 true 當使用分頁時,如果跨頁瀏覽,將不載入跳過頁面的圖片,只加載所要顯示頁面的圖片,如果設定為 false,則會載入跳過頁面的圖片。這是 lazyLoad 的子選項
lazyEffect 布林值/字串 fade 延遲載入圖片的顯示效果,預設以 400 毫秒淡入,若為 false 則不使用效果
autoHeight 布林值 false 自動使用高度
jsonPath 字串 false JSON 檔案路徑
jsonSuccess 函式 false 處理自定義 JSON 格式的函式
dragBeforeAnimFinish 布林值 true 忽略過度是否完成(只限拖動)
mouseDrag 布林值 true 關閉/開啟滑鼠事件
touchDrag 布林值 true 關閉/開啟觸控事件
addClassActive 布林值 false 給可見的專案加入 “active” 類
transitionStyle 字串 false 新增 CSS3 過度效果

回撥函式

變數 型別 預設值 說明
beforeUpdate 函式 false 響應之後的回撥函式
afterUpdate 函式 false 響應之前的回撥函式
beforeInit 函式 false 初始化之前的回撥函式
afterInit 函式 false 初始化之後的回撥函式
beforeMove 函式 false 移動之前的回撥函式
afterMove 函式 false 移動之後的回撥函式
afterAction 函式 false 初始化之後的回撥函式
startDragging 函式 false 拖動的回撥函式
afterLazyLoad 函式 false 延遲載入之後的回撥函式

自定義事件

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