响应式网站设计（8）-广告轮播

广告轮播

应用场景

在制作响应式网站的时候，往往会遇到首页广告图片轮播的设计。该部分设计的实现可以通过自己手写实现，但是考虑到代码的简洁和复用性，我们建议使用相关插件来实现，推荐使用Owl Carousel 2。

Owl Carousel 2插件官网：https://owlcarousel2.github.io/OwlCarousel2/index.html

广告滚动插件选择原则

1、支持不同的图片数量； 2、支持响应式布局； 3、具有良好的兼容性；

附：第三方组件选择原则

1、使用人数； 2、是否开源； 3、文档是否齐全； 4、活跃性（作者是否还在维护）； 5、轻量级；

Owl Carousel 2使用步骤

1、下载最新版的Owl Carousel 2（依赖jQuery）；

2、解压缩，将对应的文件放置到项目中，具体目录如下（jquery.min.js需另外下载）：

3、文件引入（https://owlcarousel2.github.io/OwlCarousel2/docs/started-installation.html）

<!--css样式引入-->
<link rel="stylesheet" href="js/vendor/OwlCarousel2-2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="js/vendor/OwlCarousel2-2.3.4/assets/owl.theme.default.min.css">

// js脚本引入
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/owl.carousel.min.js"></script>
// 相关配置项配置文件
<script src="js/main.js"></script>

4、html结构设置（https://owlcarousel2.github.io/OwlCarousel2/docs/started-installation.html）

<!-- Set up your HTML -->
<div class="owl-carousel owl-theme">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>

5、相关配置项配置（main.js文件，网址：https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html）

$(document).ready(function () {
    $(".owl-carousel").owlCarousel({
        // 一屏显示图片的数量
        items: 1,
        // 是否循环轮播
        loop: true,
        // 是否自动轮播
        autoplay: true,
        // 自动轮播时间间隔
        autoplayTimeout: 1000,
        // PC端鼠标悬停效果
        autoplayHoverPause: true
    });
});

弹性图片

响应式网站可以兼容不同的屏幕尺寸，但是如果小屏幕设备加载的图片依然是大屏幕的设备的图片，那么对于用户的流量及体验肯定是较差的。因此，就响应式网站而言，根据设备的不同加载不同的图片资源非常有必要，弹性图片的概念也就诞生了。

实现思路大致有以下五种：

项目	具体方案
方案1	js或服务端
方案2	srcset
方案3	srcset配合sizes
方案4	picture
方案5	svg

方案1：通过监听窗口的resize事件

<div class="content">
    <img src="img/480.png">
</div>

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

方案2：img标签的srcset属性

<div class="content">
    <img src="img/480.png" srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w">
</div>

通过涉及img标签的srcset属性（设置方法：图片1路径+空格+图片1的宽度+w，图片2路径+空格+图片2的宽度+w，图片3路径+空格+图片3的宽度+w），浏览器会根据网速，DPR，页面宽度，分辨率等环境因素来选择加载图片资源。

备注：图片宽度大小关系：图片1 < 图片2 < 图片3；w表示width的意思；

方案3：img标签的srcset属性 + sizes属性

<div class="content">
    <img src="img/480.png" srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w" sizes="100vw">
</div>

备注：sizes属性告知浏览器图片的尺寸，vw表示视口宽度，100vw表示100%视口宽度。

<div class="content">
    <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>

备注：结合媒体查询，当屏幕宽度大于800px的时候，图片宽度为800px；当屏幕宽度小于800px的时候，图片宽度为100%视口宽度；在480px以下的屏幕宽度，刷新后，加载的图片是480px的。对于图片的宽度，在sizes属性中，我们还可以使用calc计算。

方案4：picture标签 + source标签

<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>

备注：根据当前的网络环境，浏览器自动选取对应的source标签中的图片显示。source标签中还可以根据文件格式，屏幕横竖屏放置等选择图片显示。注意，在使用picture的时候，为了解决兼容性问题，我们需要引入picturefill库，网址：下载picturefill库

<script src="js/vendor/picturefill.min.js"></script>

方案5：svg格式图片（可缩放）

svg格式图片的特点是不会随着缩放而失真，但是不可以表现色彩丰富的图片。在线绘制网址：http://editor.method.ac/ 或者http://icomoon.io

<div class="content">
    <img src="img/water.svg">
</div>