十年網(wǎng)站開發(fā)經(jīng)驗(yàn) + 多家企業(yè)客戶 + 靠譜的建站團(tuán)隊(duì)
量身定制 + 運(yùn)營維護(hù)+專業(yè)推廣+無憂售后,網(wǎng)站問題一站解決
這篇文章主要介紹jQuery幻燈片插件owlcarousel參數(shù)的示例分析,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來自于我們對這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴,公司提供的服務(wù)項(xiàng)目有:域名申請、網(wǎng)站空間、營銷軟件、網(wǎng)站建設(shè)、廣陵網(wǎng)站維護(hù)、網(wǎng)站推廣。
Owl Carousel 是一個(gè)強(qiáng)大、實(shí)用但小巧的 jQuery 幻燈片插件,它具有一下特點(diǎn):
兼容所有瀏覽器
支持響應(yīng)式
支持 CSS3 過度
支持觸摸事件
支持 JSON 及自定義 JSON 格式
支持進(jìn)度條
支持自定義事件
支持延遲加載
支持自適應(yīng)高度
瀏覽器兼容:兼容所有瀏覽器,包括 IE6、IE7。
jQuery 兼容:兼容 1.7 及以上版本。
Owl Carousel 使用方法:
新建一個(gè)HTML文件
1、在HTML文件中引入Owl Carousel必須文件
2、HTML代碼
12345678
3、JavaScript
$(function(){ $('#owl-example').owlCarousel(); });
下面是Owl Carousel的中文參數(shù)與api說明:
參數(shù) | 類型 | 默認(rèn)值 | 說明 |
---|---|---|---|
items | 整數(shù) | 5 | 幻燈片每頁可見個(gè)數(shù) |
itemsDesktop | 數(shù)組 | [1199,4] | 設(shè)置瀏覽器寬度和幻燈片可見個(gè)數(shù),格式為[X,Y],X 為瀏覽器寬度,Y 為可見個(gè)數(shù),如[1199,4]就是如果瀏覽器寬度小于1199,每頁顯示 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 | 分頁切換速度,以毫秒為單位 |
rewindSpeed | 整數(shù) | 1000 | 重回速度,以毫秒為單位 |
autoPlay | 布爾值/整數(shù) | false | 自動播放,可選布爾值或整數(shù),若使用整數(shù),如 3000,表示 3 秒切換一次;若設(shè)置為 true,默認(rèn) 5 秒切換一次 |
stopOnHover | 布爾值 | false | 鼠標(biāo)懸停停止自動播放 |
navigation | 布爾值 | false | 顯示“上一個(gè)”、“下一個(gè)” |
navigationText | 數(shù)組 | [“prev”,”next”] | 設(shè)置“上一個(gè)”、“下一個(gè)”文字,默認(rèn)是[“prev”,”next”] |
rewindNav | 布爾值 | true | 滑動到第一個(gè) |
scrollPerPage | 布爾值 | false | 每頁滾動而不是每個(gè)項(xiàng)目滾動 |
pagination | 布爾值 | true | 顯示分頁 |
paginationNumbers | 布爾值 | false | 分頁按鈕顯示數(shù)字 |
responsive | 布爾值 | true | |
responsiveRefreshRate | 整數(shù) | 200 | 每 200 毫秒檢測窗口寬度并做相應(yīng)的調(diào)整,主要用于響應(yīng)式 |
responsiveBaseWidth | jQuery 選擇器 | window | |
baseClass | 字符串 | owl-carousel | 添加 CSS,如果不需要,最好不要使用 |
theme | 字符串 | owl-theme | 主題樣式,可以自行添加以符合你的要求 |
lazyLoad | 布爾值 | false | 延遲加載 |
lazyFollow | 布爾值 | true | 當(dāng)使用分頁時(shí),如果跨頁瀏覽,將不加載跳過頁面的圖片,只加載所要顯示頁面的圖片,如果設(shè)置為 false,則會加載跳過頁面的圖片。這是 lazyLoad 的子選項(xiàng) |
lazyEffect | 布爾值/字符串 | fade | 延遲加載圖片的顯示效果,默認(rèn)以 400 毫秒淡入,若為 false 則不使用效果 |
loop | 布爾值 | false | 無限循環(huán) |
autoHeight | 布爾值 | false | 自動使用高度 |
jsonPath | 字符串 | false | JSON 文件路徑 |
jsonSuccess | 函數(shù) | false | 處理自定義 JSON 格式的函數(shù) |
dragBeforeAnimFinish | 布爾值 | true | 忽略過度是否完成(只限拖動) |
mouseDrag | 布爾值 | true | 關(guān)閉/開啟鼠標(biāo)事件 |
margin | 整數(shù) | 0 | 幻燈片間距 |
touchDrag | 布爾值 | true | 關(guān)閉/開啟觸摸事件 |
addClassActive | 布爾值 | false | 給可見的項(xiàng)目加入 “active” 類 |
transitionStyle | 字符串 | false | 添加 CSS3 過度效果 |
owlcarousel回調(diào)函數(shù)
變量 | 類型 | 默認(rèn)值 | 說明 |
---|---|---|---|
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 | 移動之前的回調(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 | 到上一個(gè) |
owl.next | 到下一個(gè) |
owl.play | 自動播放,可傳遞一個(gè)參數(shù)作為播放速度 |
owl.stop | 停止自動播放 |
owl.goTo | 跳到第幾個(gè) |
owl.jumpTo | 不使用動畫跳到第幾個(gè) |
以上是“jQuery幻燈片插件owlcarousel參數(shù)的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!