jQuery幻灯片插件OWL Carousel

简介

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 毫秒检测窗口宽度并做相应的调整,主要用于响应式

responsiveBaseWidthjQuery 选择器window

baseClass  字符串owl-carousel添加 CSS,如果不需要,最好不要使用

theme  字符串owl-theme主题样式,可以自行添加以符合你的要求

lazyLoad  布尔值false延迟加载

lazyFollow  布尔值true当使用分页时,如果跨页浏览,将不加载跳过页面的图片,只加载所要显示页面的图片,如果设置为 false,则会加载跳过页面的图片。这是 lazyLoad 的子选项

lazyEffect  布尔值/字符串fade延迟加载图片的显示效果,默认以 400 毫秒淡入,若为 false 则不使用效果

autoHeight  布尔值false自动使用高度

jsonPath  字符串falseJSON 文件路径

jsonSuccess  函数false处理自定义 JSON 格式的函数

dragBeforeAnimFinish  布尔值true忽略过度是否完成(只限拖动)

mouseDrag  布尔值true关闭/开启鼠标事件

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 不使用动画跳到第几个

原文地址:https://www.cnblogs.com/zijue/p/9910536.html

时间: 2024-11-10 02:50:38

jQuery幻灯片插件OWL Carousel的相关文章

强大实用的jQuery幻灯片插件Owl Carousel

演 示 下 载 简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON 格式 支持进度条 支持自定义事件 支持延迟加载 支持自适应高度 …… Owl Carousel 提供了众多的参数.回调函数及自定义事件(具体请往下浏览),所以它几乎可以满足你的所有要求. 兼容 浏览器兼容:兼容所有浏览器,包括 IE6.IE7. jQuery 兼容:兼容 1.7 及

jQuery幻灯片插件Skippr

Skippr是一款带左右箭头,索引按钮,滑动切换效果并且轻量.快速的幻灯片 设置 引入jquery.skippr.css.jquery.js.jquery.skippr.js 注意jQuery必须在jquery.skippr.js之前 <head> <link href="css/jquery.skippr.css" rel="stylesheet" type="text/css" > <script src=&qu

Skippr – 轻量、快速的 jQuery 幻灯片插件

Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口宽度,而且导航是独特的条形导航. 您可能感兴趣的相关文章 太赞了!超炫的页面切换动画效果[附源码下载] 创意无限!一组网页边栏过渡动画[附源码下载] 好东西!动感的页面加载动画效果[附源码下载] 使用 CSS3 实现3D图片滑块效果[附源码下载] 时尚设计!三种奇特网格加载效果[附源码下载] 源码下

带多种过渡动画的响应式jQuery幻灯片插件

Nivo-Slider是一款非常强大的响应式jQuery幻灯片插件.该幻灯片插件内置有16种不同的动画过渡效果.它提供了丰富的参数来控制幻灯片的播放.它使用简单,并且可以兼容IE8浏览器. 在线预览   源码下载 使用方法 使用Nivo-Slider幻灯片需要引入nivo-slider.css,jQuery(1.7+)和jquery.nivo.slider.js文件. 1 2 3 <link rel="stylesheet" href="css/nivo-slider.

适合移动手机使用的jQuery幻灯片插件

jflex是一款小巧的适合移动手机使用的jQuery幻灯片插件.该幻灯片插件支持移动触摸,支持鼠标拖拽切换,还支持带进度条的自动播放模式.它是否的小球,使用非常简单. 在线预览   源码下载 使用方法 使用该幻灯片插件需要引入jQuery,jflex.min.js和jflex.min.css文件. 1 2 3 <link rel="stylesheet" href="css/jflex.min.css" type="text/css">

SlidesJS - 老牌的响应式 jQuery 幻灯片插件

SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作出优雅的幻灯片效果. 插件下载     效果演示 使用示例: <!doctype html> <head> <style> /* Prevents slides from flashing */ #slides { display:none; } </style>

基于jQuery幻灯片插件Slippry

分享一款基于jQuery幻灯片插件Slippry是一款基于Slippry.js插件实现的图片切换特效代码.效果图如下 : 在线预览   源码下载 实现的代码. html代码: <div class="htmleaf-content"> <ul id="thumbnails"> <li> <a href="#slide1"> <img src="img/image-1.jpg"

10个Jquery幻灯片插件教程

当有大量的内容或者图片需要在你的网站或者BLOG上展示的时候,以幻灯片滑动的方式是一个不错的选择,这种效果常用于公司网站或者个人BLOG.常听有人说jquery 比较难学,只要你感兴趣,实现幻灯片效果还是蛮有乐趣的,下面的Jquery 幻灯片教程将引领你进入Jquery插件开发的喜悦中,希望对大家有帮助. 1. jQuery Easy Slides v1.1 在所有的Jquery幻灯片插件中,Jquery easy sildes算是最容易使用的一个. 2. The Piecemaker XML

基于jQuery幻灯片插件SkitterSlideshow

分享一款基于jQuery幻灯片插件SkitterSlideshow是一款支持38种不同的幻灯片过渡动画效果,以及两种不同类型的导航按钮,并且它提供了大量的配置参数用于控制幻灯片的显示.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="htmleaf-container"> <div id="page"> <div id="content"> <div class=