jQuery幻灯片插件OWL Carousel

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 });

参数

回调函数

变量 类型 默认值 说明

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