jQuery幻灯片插件:OWL Carousel

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

兼容所有浏览器

支持响应式

支持 CSS3 过度

支持触摸事件

支持 JSON 及自定义 JSON 格式

支持进度条

支持自定义事件

支持延迟加载

支持自适应高度

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

兼容

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

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

使用方法

1、引入文件

<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.theme.css" 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();
});

参数

参数类型默认值说明
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 毫秒检测窗口宽度并做相应的调整,主要用于响应式
responsiveBaseWidthjQuery 选择器window
baseClass字符串owl-carousel添加 CSS,如果不需要,最好不要使用
theme字符串owl-theme主题样式,可以自行添加以符合你的要求
lazyLoad布尔值false延迟加载
lazyFollow布尔值true当使用分页时,如果跨页浏览,将不加载跳过页面的图片,只加载所要显示页面的图片,如果设置为 false,则会加载跳过页面的图片。这是 lazyLoad 的子选项
lazyEffect布尔值/字符串fade延迟加载图片的显示效果,默认以 400 毫秒淡入,若为 false 则不使用效果
loop布尔值false无限循环
autoHeight布尔值false自动使用高度
jsonPath字符串falseJSON 文件路径
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不使用动画跳到第几个

 

继续阅读
weinxin
关于本站
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
最佳 CSS 框架 Web前端

最佳 CSS 框架

在构建网站时,使用 CSS 框架是一个实时的节省,因为它为您提供了每个网页设计师和前端开发人员在制作网站时需要的工具。 CSS 框架是一个软件框架,它允许使用 HTML/CSS 进行更简单、更符合标准...
line-height安卓中不垂直居中 Web前端

line-height安卓中不垂直居中

设计响应式网页,PC端和移动端的样式兼容性,很让人挠头,最常见的就是文字垂直不居中,而且苹果手机和安卓手机下表现也不尽相同,往往苹果手机是垂直居中的,但在安卓机上字却靠上了,总是差那么一像素,应该是安...
js实时获取浏览器窗口大小 Web前端

js实时获取浏览器窗口大小

js实时获取浏览器窗口大小,我们可以使用addEventListener()方法来实现。该addEventListener()方法可以注册事件处理程序以侦听浏览器窗口resize事件,例如window...
匿名

发表评论

匿名网友 填写信息

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

评论:5   其中:访客  5   博主  0
    • 小糊涂 小糊涂 3

      沙发

      • 嗯嗯不错 嗯嗯不错 3

        顶一个,我尊敬的鸟哥!

        • 大幺壹 大幺壹 0

          鸟哥,目前我的网站用本主题,但是我文章形式用的是“图像”形式,但是文章页面只要用到“图像形式”的内容卡片上4张缩略图均不显示,这是为什么?我尝试了将图片调整为相同的尺寸,没用!

          • 我要推广网 我要推广网 0

            学到了,