OwlCarousel演示10种不同的调用方法

来源:https://www.sucaihuo.com/js/230.html 2015-08-20 09:51浏览(27469) 收藏

owlcarousel是一款猫头鹰旋转木马插件。
OwlCarousel演示10种不同的调用方法
分类:图片代码 > 图片轮播 难易:初级
查看演示 下载资源: 1295 下载资源 下载积分: 20 积分

OwlCarousel优势

<ul class='ul_demo'> <li>兼容所有浏览器</li> <li>支持响应式</li> <li>支持 CSS3 过度</li> <li>支持触摸事件</li> <li>支持 JSON 及自定义 JSON 格式</li> <li>支持进度条</li> <li>支持自定义事件</li> <li>支持延迟加载</li> <li>支持自适应高度</li> </ul>

引入jQuery和owl.carousel相关组件

<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.theme.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/owl.carousel.js"></script>

HTML

<div id="owl-demo" class="owl-carousel">
    <a class="item"><img src="img/owl1.jpg" alt=""></a>
    <a class="item"><img src="img/owl2.jpg" alt=""></a>
    <a class="item"><img src="img/owl3.jpg" alt=""></a>
    ......
</div>

jQuery

owl.carousel默认调用方法:

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

其他9种请看压缩包html代码,配对下面的API

参数 描述 默认值
items 幻灯片每页可见个数 5
itemsDesktop 设置浏览器宽度和幻灯片可见个数,格式为[X,Y],X 为浏览器宽度,Y 为可见个数,如[1199,4]就是如果浏览器宽度小于1199,每页显示 4 张,此参数主要用于响应式设计。也可以使用 false [1199,4]
itemsDesktopSmall 同上 [979,3]
itemsTablet 同上 [768,2]
itemsTabletSmall 同上,默认为 false false
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
jsonPath JSON 文件路径 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
评论11
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 3007547952

  • 头像 10楼
    11-13 10:33
    f***r
    这个真心好评~!!!
  • 头像 9楼
    09-25 13:56
    逝***丝
    希望很好 特别是第一个默认的响应式
  • 头像 8楼
    06-20 16:37
    w***t
    这个真心好评~!!!
  • 头像 7楼
    06-15 14:27
    门***开
    终于找到了我想要的
  • 头像 6楼
    03-27 09:26
    胡***胡
    今天才找到想要的特效,挺好用。。
  • 头像 5楼
    02-10 16:18
    A***宇
    非常棒,好不容易才找到
  • 头像 4楼
    06-06 10:04
    d***r
    今天才找到想要的特效,挺好用。先调试下
  • 头像 3楼
    05-18 23:16
    前***之
    太棒了,非常感谢
  • 头像 板凳
    04-12 08:59
    w***n
    wo so goods!
  • 头像 椅子
    07-01 12:38
    S***r
    太nice了。
1 2