JQuery幻灯片插件:OWL Carousel

2019年3月19日15:10:351 4,887,668

Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件,它具有以下特点:

兼容所有浏览器

支持响应式

支持 CSS3 过度

支持触摸事件

支持 JSON 及自定义 JSON 格式

支持进度条

支持自定义事件

支持延迟加载

支持自适应高度

Owl Carousel 提供了众多的参数、回调函数及自定义事件,所以它几乎可以满足你的所有要求。

兼容

浏览器兼容:兼容所有浏览器,包括 IE6、IE7。

jQuery 兼容:兼容 1.7 及以上版本。

使用方法

1、引入文件

  1. <link href=""css/owl.carousel.css" rel="stylesheet">
  2. <link href=""css/owl.theme.css" rel="stylesheet">
  3. <script src="js/jquery.min.js"></script>
  4. <script src="js/owl.carousel.js"></script>

2、HTML

  1. <div id="owl-demo" class="owl-carousel">
  2.     <div>1</div>
  3.     <div>2</div>
  4.     <div>3</div>
  5.     <div>4</div>
  6.     <div>5</div>
  7.     <div>6</div>
  8.     <div>7</div>
  9.     <div>8</div>
  10. </div>

3、JavaScript

  1. $(function(){
  2.     $('#owl-example').owlCarousel();
  3. });

参数

参数类型默认值说明
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 过度效果

回调函数

变量类型默认值说明
beforeUpdate
函数
false
响应之后的回调函数
afterUpdate
函数
false
响应之前的回调函数
beforeInit
函数
false
初始化之前的回调函数
afterInit
函数
false
初始化之后的回调函数
beforeMove
函数
false
移动之前的回调函数
afterMove
函数
false
移动之后的回调函数
afterAction
函数
false
初始化之后的回调函数
startDragging
函数
false
拖动的回调函数
afterLazyLoad
函数
false
延迟加载之后的回调函数

自定义事件

事件说明
owl.prev
到上一个
owl.next
到下一个
owl.play
自动播放,可传递一个参数作为播放速度
owl.stop
停止自动播放
owl.goTo
跳到第几个
owl.jumpTo
不使用动画跳到第几个

 

  • 本文由 发表于 2019年3月19日15:10:35
  • 发表评论

    匿名网友 填写信息

    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

    评论:1   其中:访客  1   博主  0
    1. tingting 0

      沙发!!!