jQuery幻燈片插件owlcarousel參數(shù)的示例分析-創(chuàng)新互聯(lián)
創(chuàng)新互聯(lián)成立以來不斷整合自身及行業(yè)資源、不斷突破觀念以使企業(yè)策略得到完善和成熟，建立了一套“以技術(shù)為基點(diǎn)，以客戶需求中心、市場(chǎng)為導(dǎo)向”的快速反應(yīng)體系。對(duì)公司的主營項(xiàng)目，如中高端企業(yè)網(wǎng)站企劃 / 設(shè)計(jì)、行業(yè) / 企業(yè)門戶設(shè)計(jì)推廣、行業(yè)門戶平臺(tái)運(yùn)營、
成都app開發(fā)、手機(jī)網(wǎng)站開發(fā)、微信網(wǎng)站制作、軟件開發(fā)、
光華機(jī)房服務(wù)器托管等實(shí)行標(biāo)準(zhǔn)化操作，讓客戶可以直觀的預(yù)知到從創(chuàng)新互聯(lián)可以獲得的服務(wù)效果。
這篇文章主要介紹jQuery幻燈片插件owlcarousel參數(shù)的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
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代碼
1
2
3
4
5
6
7
8
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 | 自動(dòng)播放，可選布爾值或整數(shù)，若使用整數(shù)，如 3000，表示 3 秒切換一次；若設(shè)置為 true，默認(rèn) 5 秒切換一次 |
| stopOnHover | 布爾值 | false | 鼠標(biāo)懸停停止自動(dòng)播放 |
| navigation | 布爾值 | false | 顯示“上一個(gè)”、“下一個(gè)” |
| navigationText | 數(shù)組 | [“prev”,”next”] | 設(shè)置“上一個(gè)”、“下一個(gè)”文字，默認(rèn)是[“prev”,”next”] |
| rewindNav | 布爾值 | true | 滑動(dòng)到第一個(gè) |
| scrollPerPage | 布爾值 | false | 每頁滾動(dòng)而不是每個(gè)項(xiàng)目滾動(dòng) |
| pagination | 布爾值 | true | 顯示分頁 |
| paginationNumbers | 布爾值 | false | 分頁按鈕顯示數(shù)字 |
| responsive | 布爾值 | true |
|
| responsiveRefreshRate | 整數(shù) | 200 | 每 200 毫秒檢測(cè)窗口寬度并做相應(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，則會(huì)加載跳過頁面的圖片。這是 lazyLoad 的子選項(xiàng) |
| lazyEffect | 布爾值/字符串 | fade | 延遲加載圖片的顯示效果，默認(rèn)以 400 毫秒淡入，若為 false 則不使用效果 |
| loop | 布爾值 | false | 無限循環(huán) |
| autoHeight | 布爾值 | false | 自動(dòng)使用高度 |
| jsonPath | 字符串 | false | JSON 文件路徑 |
| jsonSuccess | 函數(shù) | false | 處理自定義 JSON 格式的函數(shù) |
| dragBeforeAnimFinish | 布爾值 | true | 忽略過度是否完成（只限拖動(dòng)） |
| 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 | 移動(dòng)之前的回調(diào)函數(shù) |
| afterMove | 函數(shù) | false | 移動(dòng)之后的回調(diào)函數(shù) |
| afterAction | 函數(shù) | false | 初始化之后的回調(diào)函數(shù) |
| startDragging | 函數(shù) | false | 拖動(dòng)的回調(diào)函數(shù) |
| afterLazyLoad | 函數(shù) | false | 延遲加載之后的回調(diào)函數(shù) |
owlcarousel自定義事件
| 事件 | 說明 |
|---|
| owl.prev | 到上一個(gè) |
| owl.next | 到下一個(gè) |
| owl.play | 自動(dòng)播放，可傳遞一個(gè)參數(shù)作為播放速度 |
| owl.stop | 停止自動(dòng)播放 |
| owl.goTo | 跳到第幾個(gè) |
| owl.jumpTo | 不使用動(dòng)畫跳到第幾個(gè) |
以上是“jQuery幻燈片插件owlcarousel參數(shù)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
當(dāng)前題目：jQuery幻燈片插件owlcarousel參數(shù)的示例分析-創(chuàng)新互聯(lián)
標(biāo)題路徑：
http://weahome.cn/article/ggsjs.html
重慶分公司
重慶分公司
