你的位置:首页 > Java教程

[Java教程]jQuery owlcarousel 旋转木马


owlcarousel是一款猫头鹰旋转木马插件。
OwlCarousel优势
兼容所有浏览器
支持响应式
支持 CSS3 过度
支持触摸事件
支持 JSON 及自定义 JSON 格式
支持进度条
支持自定义事件
支持延迟加载
支持自适应高度

在线实例

默认单个自动播放显示上一张自适应高度
延迟加载加载JSON自定义JSON进度条随机显示

使用方法

  1. <div id="owl-demo" class="owl-carousel"> 
  2.     <a class="item"><img src="img/owl1.jpg" alt=""></a> 
  3.     <a class="item"><img src="img/owl2.jpg" alt=""></a> 
  4.     <a class="item"><img src="img/owl3.jpg" alt=""></a> 
  5.     ...... 
  6. </div>
复制
  1. $(function(){ 
  2.     $('#owl-example').owlCarousel(); 
  3. });
复制

参数详解

参数描述默认值
items幻灯片每页可见个数5
itemsDesktop设置浏览器宽度和幻灯片可见个数,格式为[X,Y],X 为浏览器宽度,Y 为可见个数,如[1199,4]就是如果浏览器宽度小于1199,每页显示 4 张,此参数主要用于响应式设计。也可以使用 false[1199,4]
itemsDesktopSmall同上[979,3]
itemsTablet同上[768,2]
itemsTabletSmall同上,默认为 falsefalse
itemsMobile同上[479,1]

itemsCustom

singleItem是否只显示一张false

itemsScaleUp

slideSpeed幻灯片切换速度,以毫秒为单位200
paginationSpeed分页切换速度,以毫秒为单位800
rewindSpeed重回速度,以毫秒为单位1000
autoPlay自动播放,可选布尔值或整数,若使用整数,如 3000,表示 3 秒切换一次;若设置为 true,默认 5 秒切换一次false
stopOnHover鼠标悬停停止自动播放false
navigation显示“上一个”、“下一个”false
navigationText设置“上一个”、“下一个”文字,默认是[“prev”,”next”][“prev”,”next”]
rewindNav滑动到第一个true
scrollPerPage每页滚动而不是每个项目滚动false
pagination显示分页true
paginationNumbers分页按钮显示数字false

responsive

responsiveRefreshRate每 200 毫秒检测窗口宽度并做相应的调整,主要用于响应式200

responsiveBaseWidth

baseClass添加 CSS,如果不需要,最好不要使用owl-carousel
theme主题样式,可以自行添加以符合你的要求owl-theme
lazyLoad延迟加载false
lazyFollow当使用分页时,如果跨页浏览,将不加载跳过页面的图片,只加载所要显示页面的图片,如果设置为 false,则会加载跳过页面的图片。这是 lazyLoad 的子选项true
lazyEffect延迟加载图片的显示效果,默认以 400 毫秒淡入,若为 false 则不使用效果fade
autoHeight自动使用高度false
jsonPathJSON 文件路径false
jsonSuccess处理自定义 JSON 格式的函数false
dragBeforeAnimFinish忽略过度是否完成(只限拖动)true
mouseDrag关闭/开启鼠标事件true
touchDrag关闭/开启触摸事件true
addClassActive给可见的项目加入 “active” 类false
transitionStyle添加 CSS3 过度效果false
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

下载