响应式广告实现

如何实现响应式广告

概述

   一个好的广告滚动组件支持:

• 支持不同的图片数量
• 支持响应式布局
• 具备良好的兼容性

  挑选第三方组件：使用人数、是否开源、文档是否齐全、活跃性、轻量级。

  组件：OwlCarouse2

• jQuery幻灯片插件-OwlCarouse Demo
• 强大实用的jQuery幻灯片插件Owl Carousel
• 使用示例：HTML & JavaScript

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

    $(document).ready(function () {        $(".owl-carousel").owlCarousel({            items: 1,  // 幻灯片每页可见个数            loop: true,            autoplay: true, // 自动播放，可选布尔值或整数，若设置为 true，默认 5 秒切换一次            autoplayTimeout: 3000, // 表示 3 秒切换一次            autoplayHoverPause: true // 鼠标移动到图片上停止轮播（滚动）        });    });

弹性图片

  加载与用户设备相匹配的小图片，既快速，又不会影响用户的体验。
  实现方式

• js或服务端（通过cookie，在服务端实现）

    <div> class="content">        <img src="" alt="" />    </div>    =======================================    .content {        width: 100%;        margin: 0 auto;    }    .content img {        display: block;        width: 100%;        max-width: 100%;    }

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

• srcset（默认值 sizes=”100vw”视口宽度）

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

• srcset配合sizes（图片预估尺寸）
    旧的srcset是人主导，而现在新的srcset是浏览器主导，人需要提供图片资源、以及断点，其他都交给浏览器智能解决，什么响应宽度啊、设备像素比啊，不需要要关心，浏览器会自动匹配最佳显示图片。

    <img src="img/480png"          srcset="img/1600.png 1600w, img/800.png 800w, img/480png 480w"          sizes="(min-width:800px) calc(100vw - 30em), 100VW"          alt="AD" />

  重点文章推荐：
    ⑴《响应式图片srcset全新释义sizes属性w描述符》
    ⑵《Srcset and sizes》
    ⑶《Srcset和sizes 》

• picture
    polyfill 它是一个能够补齐浏览器兼容性问题的一个东西，使用到的<picture></picture>标签 ，并不是所有浏览器都支持，为了实现更好的兼容效果，这里就使用到了这个东西 ，它能在浏览器不支持的时候提供一些替代的方式 ，对于响应式图片，有名的picturefill库能实现兼容性强的‘响应式’图片，对于不支持picture的浏览器，它会用js获取srcset后面的设置，然后决定输出什么样的图片。
    《响应式设计和HTML的<picture>标签 》

    <script src="js/vendor/picturefill.min.js"></script>    ================================================================    <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>

• svg（很难实现色彩形状较复杂的图形）
      ①IcoMoon
      ②《如何灵活利用免费开源图标字体-IcoMoon篇》
      ③在线制作SVG图片：editor.method.ac

效果