溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹jQuery幻燈片插件owlcarousel參數的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
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的中文參數與api說明：
| 參數 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| 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 則不使用效果 |
| loop | 布爾值 | false | 無限循環 |
| autoHeight | 布爾值 | false | 自動使用高度 |
| jsonPath | 字符串 | false | JSON 文件路徑 |
| jsonSuccess | 函數 | false | 處理自定義 JSON 格式的函數 |
| dragBeforeAnimFinish | 布爾值 | true | 忽略過度是否完成（只限拖動） |
| mouseDrag | 布爾值 | true | 關閉/開啟鼠標事件 |
| margin | 整數 | 0 | 幻燈片間距 |
| touchDrag | 布爾值 | true | 關閉/開啟觸摸事件 |
| addClassActive | 布爾值 | false | 給可見的項目加入 “active” 類 |
| transitionStyle | 字符串 | false | 添加 CSS3 過度效果 |
owlcarousel回調函數
| 變量 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| beforeUpdate | 函數 | false | 響應之后的回調函數 |
| afterUpdate | 函數 | false | 響應之前的回調函數 |
| beforeInit | 函數 | false | 初始化之前的回調函數 |
| afterInit | 函數 | false | 初始化之后的回調函數 |
| beforeMove | 函數 | false | 移動之前的回調函數 |
| afterMove | 函數 | false | 移動之后的回調函數 |
| afterAction | 函數 | false | 初始化之后的回調函數 |
| startDragging | 函數 | false | 拖動的回調函數 |
| afterLazyLoad | 函數 | false | 延遲加載之后的回調函數 |
owlcarousel自定義事件
| 事件 | 說明 |
|---|---|
| owl.prev | 到上一個 |
| owl.next | 到下一個 |
| owl.play | 自動播放，可傳遞一個參數作為播放速度 |
| owl.stop | 停止自動播放 |
| owl.goTo | 跳到第幾個 |
| owl.jumpTo | 不使用動畫跳到第幾個 |
以上是“jQuery幻燈片插件owlcarousel參數的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
