Mikel
[转载]Jquery轻量级幻灯插件-OWL Carousel–支持触屏的移动浏览器 – 凤凰涅磐360yi – 博客园.
在项目中，需要做一个幻灯功能，领导说需要一个小清醒的啊，轻量级的。刚开始搜索到这个：
CRAFTYSLIDE插件。但是用起来比较麻烦。后来找到这个JQuery 插件：OWL Carousel。咋起了这么个名字，真是不明白。
反正好用就行吧。很好用，分享给大家。
首先是说明一下OWL Carousel幻灯的主要功能。
-
文件小。Css+js不到10k，压缩之后。
-
支持触屏。经过测试，在Android手机的主流浏览器：QQ、百度、UC、微信内置浏览器等支持
-
响应式设计。支持不用屏幕、触屏。支持div、图片等。支持全部显示、单个显示
-
简洁代码，使用方便
Demo截图：
支持div如下图.div内容你自己定义就行
支持图片
支持单个项目显示
使用方法：
引用js和css文件
<!-- Basic stylesheet -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<!-- Default Theme -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
<!-- You can use latest version of jQuery -->
<script src="jquery-1.9.1.min.js"></script>
<!-- Include js plugin -->
<script src="assets/owl-carousel/owl.carousel.js"></script>
在你的页面中，创建一下结构的html代码：
View Code
最后，调用OWL Carousel插件提供的方法：
$(document).ready(function() {
$("#owl-example").owlCarousel();
});
是不是很简单？
OWL Carousel参数说明：
| 参数 | 默认值 | 说明 |
| slideSpeed | 200 | 滑动间隔时间，毫秒 |
| paginationSpeed | false | 是否支持分页 |
| autoPlay | false | 是否自动播放。 |
| goToFirst | true | 回到首页 |
| goToFirstSpeed | 1000 | 回到首页时间 |
| stopOnHover | false | 设置成true不支持触摸 |
| navigation | false | 是否显示上一个和下一个按钮。 |
| navigationText | [“prev”,”next”] | 显示上下页的文字。不需要的话设置成false：“navigationText : false” |
| pagination | true | 显示分页 |
| paginationNumbers | false | 是否显示分页数字 |
| responsive | true | 是否开启响应式设计 |
| items | 5 | 一次展示项目个数 |
| itemsDesktop | [1199,4] | 在桌面宽度受限的情况，显示项目数 |
| itemsDesktopSmall | [979,3] | 同上 |
| itemsTablet | [768,2] | 同上 |
| itemsMobile | [479,1] | 同上 |
| baseClass | “owl-carousel” | 样式 |
| theme | “owl-theme” | 使用的主题 |
外部调用的api接口：
|
1
|
<span style="font-size: 14px;"> </span> |
//Initialize Plugin $(".owl-carousel").owlCarousel() //get carousel instance data and store it in variable owl var owl = $(".owl-carousel").data('owlCarousel'); //Public methods owl.next() // Go to next slide owl.prev() // Go to previous slide owl.goTo(x) // Go to x slide owl.update() // Update Slide owl.buildControlls() // Build Controlls owl.destroyControlls() // Remove Controlls owl.play() // Autoplay owl.stop() // Autoplay Stop
|
1
|
|
实例代码：支持div滑动
<div id="owl-example" class="owl-carousel owl-theme" style="opacity: 1; display: block; "> <div class="owl-wrapper-outer"><div class="owl-wrapper" style="width: 4680px; left: 0px; display: block; -webkit-transform: translate3d(0px, 0px, 0px); "><div class="owl-item" style="width: 234px; "><div class="item darkCyan"> <img src="assets/img/demo-slides/touch.png" alt="Touch"> <h3>Touch</h3> <h4>Can touch this</h4> </div></div><div class="owl-item" style="width: 234px; "><div class="item forestGreen"> <img src="assets/img/demo-slides/grab.png" alt="Grab"> <h3>Grab</h3> <h4>Can grab this</h4> </div></div><div class="owl-item" style="width: 234px; "><div class="item orange"> <img src="assets/img/demo-slides/responsive.png" alt="Responsive"> <h3>Responsive</h3> <h4>Fully responsive!</h4> </div></div><div class="owl-item" style="width: 234px; "><div class="item yellow"> <img src="assets/img/demo-slides/css3.png" alt="CSS3"> <h3>CSS3</h3> <h4>3D Acceleration.</h4> </div></div><div class="owl-item" style="width: 234px; "><div class="item dodgerBlue"> <img src="assets/img/demo-slides/multi.png" alt="Multi"> <h3>Multiply</h3> <h4>Owls on page.</h4> </div></div><div class="owl-item" style="width: 234px; "><div class="item skyBlue"> <img src="assets/img/demo-slides/modern.png" alt="Modern Browsers"> <h3>Modern</h3> <h4>Browsers Compatibility</h4> </div></div><div class="owl-item" style="width: 234px; "><div class="item zombieGreen"> <img src="assets/img/demo-slides/zombie.png" alt="Zombie Browsers - old ones"> <h3>Zombie</h3> <h4>Browsers Compatibility</h4> </div></div><div class="owl-item" style="width: 234px; "><div class="item violet"> <img src="assets/img/demo-slides/controls.png" alt="Take Control"> <h3>Take Control</h3> <h4>The way you you like</h4> </div></div><div class="owl-item" style="width: 234px; "><div class="item yellowLight"> <img src="assets/img/demo-slides/feather.png" alt="Light"> <h3>Light</h3> <h4>As a feather</h4> </div></div><div class="owl-item" style="width: 234px; "><div class="item steelGray"> <img src="assets/img/demo-slides/tons.png" alt="Tons of Opotions"> <h3>Tons</h3> <h4>of options</h4> </div></div></div></div> <div class="owl-controlls clickable"><div class="owl-pagination"><div class="owl-page active"><span class=""></span></div><div class="owl-page"><span class=""></span></div></div></div></div>
