脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → owlcarousel中文参数说明

jQuery幻灯片插件owlcarousel参数说明中文文档

 更新时间：2018年02月27日 09:27:36   投稿：wdc  
jQuery幻灯片插件owlcarousel是一个小巧强大兼容性强的幻灯片插件，兼容IE6以上所有浏览器，本文主要介绍了字的使用方法与中文参数与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的中文参数与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的中文参数说明与API，如果想修改owlcarousel的样式可以查找owl.carousel.css文件中的对应CSS代码

您可能感兴趣的文章:

相关文章

  • JS实现一个文件选择组件详解

    JS实现一个文件选择组件详解

    这篇文章主要为大家介绍了JS实现一个文件选择组件详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • JavaScript监测数据类型方法全面总结

    JavaScript监测数据类型方法全面总结

    这篇文章主要为大家介绍了JavaScript监测数据类型方法示例全面总结,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • JS代码检查工具ESLint介绍与使用方法

    JS代码检查工具ESLint介绍与使用方法

    ESLint是一个JavaScript代码静态检查工具，可以检查JavaScript的语法错误，提示潜在的bug，本文将详细介绍ESLint的使用方法
    2020-02-02
  • 详解微信小程序 wx.uploadFile 的编码坑

    详解微信小程序 wx.uploadFile 的编码坑

    编写微信小程序时，用到 wx.uploadFile，用来上传图片＋文本信息，本篇文章主要介绍了微信小程序 wx.uploadFile 的编码坑，有兴趣的可以了解一下。
    2017-01-01
  • 微信小程序 共用变量值的实现

    微信小程序 共用变量值的实现

    这篇文章主要介绍了微信小程序 共用变量值的实现的相关资料,需要的朋友可以参考下
    2017-07-07
  • 前端canvas中物体边框和控制点的实现示例

    前端canvas中物体边框和控制点的实现示例

    这篇文章主要为大家介绍了前端canvas中物体边框和控制点的实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • VBScript版代码高亮

    VBScript版代码高亮

    VBScript版代码高亮...
    2006-06-06
  • 微信小程序 底部导航栏目开发资料

    微信小程序 底部导航栏目开发资料

    这篇文章主要介绍了微信小程序 底部导航栏目开发资料的相关资料，微信小程序底部想要有一个漂亮的导航栏目，不知道怎么制作，于是百度找到了本篇文章，分享给大家,需要的朋友可以参考下
    2016-12-12
  • 一篇文章教你学会js实现弹幕效果

    一篇文章教你学会js实现弹幕效果

    弹幕效果随着b站的越做越强，出现了越来越多的仿照b站的视频站点。然而这些视频站仿照的最多的只有一点！那就是弹幕，现在也越来越多的人喜欢上了弹幕本文就教你如何制作
    2021-08-08
  • TS 项目中高效处理接口返回数据方法详解

    TS 项目中高效处理接口返回数据方法详解

    这篇文章主要为大家介绍了TS 项目中如何高效的处理接口返回的数据的方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01

最新评论