移动端轮播图自适应

大屏幕下怎么展示？

将容器的高度固定（如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中轮播图的结构及详解

    <div id="carousel-example-generic-xiugai" class="carousel slide" data-ride="carousel">
        
        <ol class="carousel-indicators">
            
            <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>

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

        
        
        <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">Previousspan>
        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">Nextspan>
        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(`${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");
            }
        }
    }
}