亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

jQuery幻燈片插件owlcarousel參數(shù)說明中文文檔

 更新時間:2018年02月27日 09:27:36   投稿:wdc  
jQuery幻燈片插件owlcarousel是一個小巧強大兼容性強的幻燈片插件,兼容IE6以上所有瀏覽器,本文主要介紹了字的使用方法與中文參數(shù)與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代碼

<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說明:

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

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

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

owlcarousel自定義事件

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

以上既是jQuery幻燈片插件owlcarousel的中文參數(shù)說明與API,如果想修改owlcarousel的樣式可以查找owl.carousel.css文件中的對應CSS代碼

相關文章

最新評論