jQuery幻灯片插件owlcarousel参数的示例分析-创新互联
创新互联成立以来不断整合自身及行业资源、不断突破观念以使企业策略得到完善和成熟，建立了一套“以技术为基点，以客户需求中心、市场为导向”的快速反应体系。对公司的主营项目，如中高端企业网站企划 / 设计、行业 / 企业门户设计推广、行业门户平台运营、
成都app开发、手机网站开发、微信网站制作、软件开发、
光华机房服务器托管等实行标准化操作，让客户可以直观的预知到从创新互联可以获得的服务效果。
这篇文章主要介绍jQuery幻灯片插件owlcarousel参数的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件，它具有一下特点：
兼容所有浏览器
支持响应式
支持 CSS3 过度
支持触摸事件
支持 JSON 及自定义 JSON 格式
支持进度条
支持自定义事件
支持延迟加载
支持自适应高度
浏览器兼容：兼容所有浏览器，包括 IE6、IE7。
jQuery 兼容：兼容 1.7 及以上版本。
Owl Carousel 使用方法：
新建一个HTML文件
1、在HTML文件中引入Owl Carousel必须文件
2、HTML代码
1
2
3
4
5
6
7
8
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参数的示例分析”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
当前标题：jQuery幻灯片插件owlcarousel参数的示例分析-创新互联
标题URL：
http://chengdu.cdxwcx.cn/article/ggsjs.html
