owlcarousel是一款猫头鹰旋转木马插件。
OwlCarousel优势
兼容所有浏览器
支持响应式
支持 CSS3 过度
支持触摸事件
支持 JSON 及自定义 JSON 格式
支持进度条
支持自定义事件
支持延迟加载
支持自适应高度
在线实例
| 默认 | 单个 | 自动播放 | 显示上一张 | 自适应高度 |
| 延迟加载 | 加载JSON | 自定义JSON | 进度条 | 随机显示 |
使用方法
- <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>
复制
- $(function(){
- $(‘#owl-example‘).owlCarousel();
- });
复制
参数详解
| 参数 | 描述 | 默认值 |
| 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 |
下载
时间： 2024-10-27 10:59:42