owl.carousel

标签：nim   显示效果   需要   幻灯片   on()   mob   窗口   body   图片   

简介

Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件，它具有一下特点：

• 兼容所有浏览器
• 支持响应式
• 支持 CSS3 过度
• 支持触摸事件
• 支持 JSON 及自定义 JSON 格式
• 支持进度条
• 支持自定义事件
• 支持延迟加载
• 支持自适应高度
• ……

Owl Carousel 提供了众多的参数、回调函数及自定义事件（具体请往下浏览），所以它几乎可以满足你的所有要求。

兼容

浏览器兼容：兼容所有浏览器，包括 IE6、IE7。

jQuery 兼容：兼容 1.7 及以上版本。

使用方法

1、引入文件

<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.theme.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/owl.carousel.js"></script>

2、HTML

<div id="owl-demo" class="owl-carousel">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

3、JavaScript

$(function(){
    $(‘#owl-example‘).owlCarousel();
});

参数

回调函数

自定义事件

扩展网址：http://www.dowebok.com/demo/2014/93/index9.html

http://www.dowebok.com/93.html

owl.carousel

标签：nim   显示效果   需要   幻灯片   on()   mob   窗口   body   图片   

原文地址：http://www.cnblogs.com/empist/p/7307933.html