实现网站的响应式轮播图

首先，得前人经验，借助插件实现轮播，不必吭哧吭哧绞尽脑计想逻辑，只需调属性即可，那么
怎么样来挑选第三方组件：
1.使用人数 以免踩坑
2.是否开源
3.文档是否齐全 使用帮助
4.活跃性 积极维护
5.小巧够用即可（轻量级）

这里选择OwlCarousel2（其实选啥看自己兴趣，大同小异）

<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css"><link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

<script src="jquery.min.js"></script><script src="owlcarousel/owl.carousel.min.js"></script>

     <div class="ad">            <div class="owl-carousel owl-theme">                <div class="item">                <img src="img/ad001.png" />                </div>                <div class="item">                <img src="img/ad002.png" />                </div>                <div class="item">                <img src="img/ad003.png" />                </div>            </div>        </div>

$(document).ready(function(){  $(".owl-carousel").owlCarousel();});

基本的配置项：

items   一次显示几张图片Type: NumberDefault: 3The number of items you want to see on the screen.

nav    前后切换按钮Type: BooleanDefault: falseShow next/prev buttons.

loop   循环Type: BooleanDefault: falseInfinity loop. Duplicate last and first items to get loop illusion.

autoplay  自动播放Type: BooleanDefault: falseAutoplay.

autoplayTimeout  自动播放时间间隔Type: NumberDefault: 5000Autoplay interval timeout.

autoplayHoverPause  鼠标悬停Type: BooleanDefault: falsePause on mouse hover.

那么，这些配置项该怎么添加呢？写入js里面即可，看下面代码，

$(document).ready(function(){  $(".owl-carousel").owlCarousel({   items:1,   autoplay:true,   autoplayTime:4000,   autoplayHoverPause:true});});

实现响应式图片的方法：

1.js或服务器端

$(document).ready(function(){    function makeImageResponsive(){        var width=$(window).width();        var img=$('.content img');        if(width<=480){            img.attr('src','img/480.png');        }else if(width<=800){            img.attr('src','img/800.png');        }else{            img.attr('src','img/1600.png');        }    }    $(window).on('resize load',makeImageResponsive);})

判断浏览器宽度的值，判断使用哪张图片。后台服务器用cookie处理也可以。

2.srcset

srcset为新标记，srcset是img标签中的属性，

<div class="content" style="width:100%;">    <img src="img/480.png" srcset="img/480.png 480w,img/800.png 800w,img/1600.png 1600w"/></div>

480w：480width
其实，使用srcset有个坑，当你把content的width值改成50%的时候，图片宽度大于240时就已经用800的图片展示了，就是说，图片变小，但是窗口还是按照100%来进行设置，那么，就需要配合sizes来进行设置了。

3.srcset配合sizes

sizes默认值为100vw，100vw：100% viewport width
不管img宽度是多少，content宽度设多少，都以100%视口宽度来显示，

<div class="content" style="width:50%;">    <img src="img/480.png" srcset="img/480.png 480w,img/800.png 800w,img/1600.png 1600w" sizes="50vw"/></div>

下面代码媒体查询实现：
在最小宽度为800px下，图片预估宽度为800px，其他情况下100%的视口宽度。

<div class="content" style="width:100%;">    <img src="img/480.png" srcset="img/480.png 480w,img/800.png 800w,img/1600.png 1600w" sizes="(min-width:800px) 800px,100vw"/></div>

这种情况下，1600的图片便不会加载出来。

如果在有边距的情况下，sizes值也可以通过算式来设置，如：

sizes="(min-width:800px) calc(100vw - 30em),100vw"

4.picture

可以在picture中写入不同的source来匹配不同的图片加载。可以设置多组图片配置。

<div class="content">    <picture>    <source media="(max-width:36em)" srcset="img/csdn-s.jpg 768w"/>    <source media="(orientation：landscape)" srcset="img/csdn-s.jpg 768w"/><!--针对横屏-->    <source srcset="img/csdn.jpg 1800w"/>    <img src="img/csdn.jpg" />      </picture></div>

其次，source还可以设置图片的格式，比如：webp，谷歌开发的图片格式
目前此格式，谷歌和安卓浏览器支持。

<source type="image/webp" srcset="logo.webp 480w,logo-m.webp 800w,logo-l.webp 1600w"/><source type="image/svg+xml" srcset="logo.svg 480w,logo.svg 800w,logo.svg 1600w"/>

5.svg

svg可缩放的矢量图片，一般简单的图标可以使用，在线编辑矢量图网站，http://editor.method.ac , https://icomoon.io

polyfill 主要处理浏览器兼容脚本，针对不同的兼容，有不同的库，针对响应式图片的兼容，有一个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="第一张图片"/>                 </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 src="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 src="img/ad003.png" alt="第三张图片"/>                 </picture>                </div>            </div>        </div>