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 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 });参数
|
回调函数
变量 类型 默认值 说明
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 不使用动画跳到第几个
- 上一篇 »linux下WPS的使用
- 下一篇 »javascript 幻灯片代码，含自动播放
