Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件，它具有一下特点：
兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON 格式 支持进度条 支持自定义事件 支持延迟加载 支持自适应高度浏览器兼容：兼容所有浏览器，包括 IE6、IE7。
jQuery 兼容：兼容 1.7 及以上版本。
Owl Carousel 使用方法：
新建一个HTML文件
1、在HTML文件中引入Owl Carousel必须文件
<link href="css/owl.carousel.css" rel="external nofollow" rel="stylesheet"><link href="css/owl.theme.css" rel="external nofollow" 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();});下面是Owl Carousel的中文参数与api说明：
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| items | 整数 | 5 | 幻灯片每页可见个数 |
| itemsDesktop | 数组 | [1199,4] | 设置浏览器宽度和幻灯片可见个数，格式为[X,Y]，X 为浏览器宽度，Y 为可见个数，如[1199,4]就是如果浏览器宽度小于1199，每页显示 4 张，此参数主要用于响应式设计。也可以使用 false |
| itemsDesktopSmall | 数组 | [979,3] | 同上 |
| itemsTablet | 数组 | [768,2] | 同上 |
| itemsTabletSmall | 数组 | false | 同上，默认为 false |
| itemsMobile | 数组 | [479,1] | 同上 |
| itemsCustom | 数组 | false | |
| singleItem | 布尔值 | false | 是否只显示一张 |
| itemsScaleUp | 布尔值 | false | |
| slideSpeed | 整数 | 200 | 幻灯片切换速度，以毫秒为单位 |
| paginationSpeed | 整数 | 800 | 分页切换速度，以毫秒为单位 |
| rewindSpeed | 整数 | 1000 | 重回速度，以毫秒为单位 |
| autoPlay | 布尔值/整数 | false | 自动播放，可选布尔值或整数，若使用整数，如 3000，表示 3 秒切换一次；若设置为 true，默认 5 秒切换一次 |
| stopOnHover | 布尔值 | false | 鼠标悬停停止自动播放 |
| navigation | 布尔值 | false | 显示“上一个”、“下一个” |
| navigationText | 数组 | [“prev”,”next”] | 设置“上一个”、“下一个”文字，默认是[“prev”,”next”] |
| rewindNav | 布尔值 | true | 滑动到第一个 |
| scrollPerPage | 布尔值 | false | 每页滚动而不是每个项目滚动 |
| pagination | 布尔值 | true | 显示分页 |
| paginationNumbers | 布尔值 | false | 分页按钮显示数字 |
| responsive | 布尔值 | true |
学习交流
热门图片
猜你喜欢的新闻
新闻热点  2024-04-27 13:35:46
 2024-04-27 13:33:47
 2024-04-24 22:53:44
 2024-04-23 19:32:50
 2024-04-23 19:25:50
 2024-04-23 19:13:19
疑难解答 图片精选 |
