强大的jQuery焦点图插件Owl Carousel + 响应式图片（案例解析）
邢思淼
GitHub地址：https://github.com/OwlCarousel2/OwlCarousel2
在各式各样的网站中，都能看到焦点图插件的身影。
一个好的焦点图插件必须满足以下特点：1. 支持不同数量的图片 2. 支持响应式布局 3. 具有良好的兼容性
Owl Carousel完全满足这几个特点。Owl Carousel是非常强大的jQuery焦点图插件，这个焦点图插件功能众多，高度可定制性，支持触摸设备，并且是响应式的。
本文将通过一个自适应轮播图案例，介绍Owl Carousel结合响应式图片的使用方法。
GitHub地址：https://github.com/Hayley2016/OwlCarousel-with-responsiveImage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>强大的jQuery焦点图插件Owl Carousel + 响应式图片（案例解析）</title>
<link rel="stylesheet" href="node_modules/owl.carousel/dist/assets/owl.carousel.min.css" />
<style>
.ad .item {
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<section class="ad">
<div class="owl-carousel owl-theme">
<div class="item">
<picture>
<source srcset="img/ad001-l.png" media="(min-width:50em)">
<source srcset="img/ad001-m.png" media="(min-width:30em)">
<img src="img/ad001.png" alt="2015年度报告">
</picture>
</div>
<div class="item">
<picture>
<source srcset="img/ad002-l.png" media="(min-width: 50em)">
<source srcset="img/ad002-m.png" media="(min-width: 30em)">
<img srcset="img/ad002.png" alt="新年红包">
</picture>
</div>
<div class="item">
<picture>
<source srcset="img/ad003-l.png" media="(min-width: 50em)">
<source srcset="img/ad003-m.png" media="(min-width: 30em)">
<img srcset="img/ad003.png" alt="新手秘籍">
</picture>
</div>
</div>
</section>
</div>
</body>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/picturefill/dist/picturefill.min.js"></script>
<script src="node_modules/owl.carousel/dist/owl.carousel.min.js"></script>
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
items: 1,
loop: true,
autoplay: true,
autoplayTimeout: 3000,
autoplayHoverPause: true
});
});
</script>
</html>附：如何挑选第三方插件：
1. 使用人数 2. 是否开源 3. 文档是否齐全 4. 活跃性 5. 小巧够用的组件（轻量级）
与君共勉：再牛逼的梦想，也抵不住傻逼般的坚持！
类似资料：