移动端轮播图自适应

大屏幕下怎么展示？

将容器的高度固定（如410px），将轮播图改为背景显示，由于可能图片的高度不一定是410px，所以需要设置css3中的background-size。

为什么这么展示？

美工为了在不同屏幕下更好地展示将图片两边做的非常宽，但是我们大多数情况的页面宽度都无法满足这样的图片宽度，而且Bootstrap的样式中默认将图片的max-width设置为100%，造成界面图片缩放。
###有几种实现方案？
想在一个较小屏幕下展示一个超宽的图片，并让图片居中显示

1. 换用背景图的方式，background-position: center center;
2. 使img元素绝对定位，left:50%，margin-left: -width/2

小屏幕下怎么展示？

图片宽度100%，高度自适应

为什么这么展示？

手机端屏幕比较小，如果使用背景图的方式可能会导致可视区域展示不全。

怎么实现大小屏的切换？

获取当前屏幕的宽度与设置的中间值进行比较，大于的用背景图展示，小于的用img展示，代码详见下文

---

bootstrap中轮播图的结构及详解

<!-- 首先修改自己轮播图的ID，所有效果都在获取ID的基础上生成的 
            class="carousel slide"显示当前是一个轮播图，slide增加的是滑动的效果
            data-ride="carousel" 让轮播图在页面初始化后就开始播放 （去掉轮播图是静止状态）      
        -->
    <div id="carousel-example-generic-xiugai" class="carousel slide" data-ride="carousel">
        <!-- Indicators 指示器  图片轮播的控制点 （下方小圆点）-->
        <ol class="carousel-indicators">
            <!-- action代表当前激活的指示器 
                data-target  控制的是哪个轮播图（自定义的ID）
                data-slide-to 指示器对应的是哪张图
            -->
            <li data-target="#carousel-example-generic-xiugai" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic-xiugai" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic-xiugai" data-slide-to="2"></li>
            <li data-target="#carousel-example-generic-xiugai" data-slide-to="3"></li>
        </ol>

        <!-- Wrapper for slides 轮播图图片容器-->
        <!--item 对应每个轮播图（数量与指示器对应）
            carousel-caption 标题或说明性文字 
            role  没有实际效果 有语义效果
        -->
        <div class="carousel-inner" role="listbox">
            <div class="item active" data-image-lg="img/slide_01_2000x410.jpg" data-image-xs="img/slide_01_640x340.jpg">

                <div class="carousel-caption"></div>
            </div>
            <div class="item" data-image-lg="img/slide_02_2000x410.jpg" data-image-xs="img/slide_02_640x340.jpg">
                <!-- <img src="./img/slide_02_2000x410.jpg" alt="..."> -->
                <div class="carousel-caption"></div>
            </div>
            <div class="item" data-image-lg="img/slide_03_2000x410.jpg" data-image-xs="img/slide_03_640x340.jpg">
                <!-- <img src="./img/slide_03_2000x410.jpg" alt="..."> -->
                <div class="carousel-caption"></div>
            </div>
            <div class="item" data-image-lg="img/slide_04_2000x410.jpg" data-image-xs="img/slide_04_640x340.jpg">
                <!-- <img src="./img/slide_04_2000x410.jpg" alt="..."> -->
                <div class="carousel-caption"></div>
            </div>
        </div>

        <!-- Controls 控制器 （左右箭头）-->
        <!-- href对应指定控制的轮播图
            data点击按钮后的滑动方向，prev 前一张，next 后一张
            sr-only 不常用
        -->
        <a class="left carousel-control" href="#carousel-example-generic-xiugai" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic-xiugai" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

js初始化参数

interval: 10000, 多久播放一次
pause: ‘null’, 是否鼠标悬停暂停
wrap: true, 是否循环播放
keyboard: false,是否监听键盘事件

 $(function () {
            $('自定义id').carousel({
                interval: 10000,
                pause: 'null',
                wrap: true,
                keyboard: false,

            });
        });

提供的方法

.carousel(‘cycle’) 开始循环播放
.carousel(‘pause’) 暂停播放
.carousel(number) 跳转到指定轮播图
.carousel(‘prev’) 上一个轮播图
.carousel(‘next’) 下一个轮播图

事件

slide.bs.carousel 轮播图即将切换的时候执行
slid.bs.carousel 轮播图切换之后执行

js修改轮播图自适应样式

$(function () { //相当于onload
    // 轮播图的响应式(大屏幕下用背景图，小屏幕用img)
    // 根据屏幕宽度决定背景图形式还是图片
    function resize() {
        // 先获取屏幕宽度
        var windowWidth = $(window).width();
        // 判断目前屏幕大小
        var isSmallScreen = windowWidth < 768; //返回布尔值
        // 找到需要操作的元素
        $("#carousel-example-generic-xiugai .carousel-inner .item").each(function (i, item) {
            var $item = $(item);
            // console.log(item) //返回的是dom对象
            var imgSrc = isSmallScreen ? $item.data("image-xs") : $item.data("image-lg");
            // 大屏设置背景图片
            $item.css({
                backgroundImage: `url(${imgSrc})`
            })
            // 小屏 追加img标签
            if (isSmallScreen) {
                $item.html(`<img src=${imgSrc}>`)
            } else {
                // empty() 方法从被选元素移除所有内容，包括所有文本和子节点。
                $item.empty();
            }
        })
    }
    // window触发resize事件
    // trigger() 方法触发被选元素的指定事件类型。
    // 当调整浏览器窗口大小时，发生 resize 事件。
    $(window).on("resize", resize).trigger("resize");
    
    // 手机端的触碰事件
    var carousel = $(".carousel");
    var startX, endX, moves;
    var startMove = 50;
    carousel.on("touchstart", function (e) {
        startX = e.originalEvent.touches[0].clientX;
    })
    carousel.on("touchmove", function (e) {
        endX = e.originalEvent.touches[0].clientX;
    })
    carousel.on("touchend", function (e) {
        moves = Math.abs(startX - endX) - startMove;
        if (moves) {
            if (startX - endX > 0) {
                $(this).carousel("next");
            } else if (startX - endX < 0) {
                $(this).carousel("prev");
            }
        }
    })
    // 鼠标拖动事件
    var x1,x2,xmove
    carousel[0].onmousedown = function(e1){
        x1 = e1.clientX;
        carousel[0].onmousemove = function(e2){
        x2 = e2.clientX;
        }
    }
    carousel[0].onmouseup= function(){
        xmove = Math.abs(x1 - x2) - startMove;
        if (xmove) {
            if (x1 - x2 > 0) {
                $(this).carousel("next");
            } else if (x1 - x2 < 0) {
                $(this).carousel("prev");
            }
        }
    }
}