响应式广告和响应式图片

响应式广告这里我们使用了第三方的插件来处理广告轮播图。
下面是选择第三方插件的方法：

image.png

这里我们选择处理图片的插件是OwlCarousel2
地址如下：https://github.com/OwlCarousel2/OwlCarousel2
优点如下：对响应式有好的支持，对不同的浏览器有很好的支持，最小的压缩包很小。
首先要引入下面的样式库：
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
接下来要引入下面的js:
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
如下轮播图响应式图片使用了picturefill.js 文件目的是处理不支持picture标签的浏览器来完成响应式图片的设置。
处理轮播图的样式代码如下所示：
<div 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>
</div>
处理轮播图的js代码如下所示：
$(document).ready(function () {
$(".owl-carousel").owlCarousel({
items: 1,
loop: true,
autoplay: true,
autoplayTimeout: 3000,
autoplayHoverPause: true
});
});
接下来要处理的部分就是响应式图片了根据不同的浏览器窗口大小进而处理不同的响应式的图片根据浏览器窗口大小进而相应图片大小