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

川长思鸟来 2021-09-16 04:36 413阅读 0赞

##                                                             广告轮播 ##

### 应用场景 ###

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

Owl Carousel 2插件官网：[https://owlcarousel2.github.io/OwlCarousel2/index.html][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需另外下载）：

![70][]

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

<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][https_owlcarousel2.github.io_OwlCarousel2_docs_started-installation.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][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
        });
    });

### 弹性图片 ###

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

![70 1][]

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

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:middle;"> <p><span style="color:#3399ea;"><strong>项目</strong></span></p> </td> 
   <td style="text-align:left;vertical-align:middle;"><span style="color:#3399ea;"><strong>具体方案</strong></span></td> 
  </tr> 
  <tr> 
   <td style="text-align:left;vertical-align:middle;">方案1</td> 
   <td style="text-align:left;vertical-align:middle;">js或服务端</td> 
  </tr> 
  <tr> 
   <td style="text-align:left;vertical-align:middle;"> <p>方案2</p> </td> 
   <td style="text-align:left;vertical-align:middle;">srcset</td> 
  </tr> 
  <tr> 
   <td style="text-align:left;vertical-align:middle;">方案3</td> 
   <td style="text-align:left;vertical-align:middle;">srcset配合sizes</td> 
  </tr> 
  <tr> 
   <td style="text-align:left;vertical-align:middle;">方案4</td> 
   <td style="text-align:left;vertical-align:middle;">picture</td> 
  </tr> 
  <tr> 
   <td style="text-align:left;vertical-align:middle;">方案5</td> 
   <td style="text-align:left;vertical-align:middle;">svg</td> 
  </tr> 
 </tbody> 
</table>

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

$(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属性**

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

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

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

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

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

**方案4：picture标签 + source标签**

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

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

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

备注：兼容性对比：svg  >  srcset  >  picture

[https_owlcarousel2.github.io_OwlCarousel2_index.html]: https://owlcarousel2.github.io/OwlCarousel2/index.html
[70]: /images/20210802/a9f3543e797d424c8c37f51334b52610.png
[https_owlcarousel2.github.io_OwlCarousel2_docs_started-installation.html]: https://owlcarousel2.github.io/OwlCarousel2/docs/started-installation.html
[https_owlcarousel2.github.io_OwlCarousel2_docs_api-options.html]: https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
[70 1]: /images/20210802/15a5434226e44af69bb4d925aea4e6f8.png
[picturefill]: http://scottjehl.github.io/picturefill/
[http_editor.method.ac]: http://editor.method.ac/
[http_icomoon.io]: http://icomoon.io