Bootstrap下的輪播圖

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="1000" data-pause="hover" >
    <!--點容器-->
    <ul class="carousel-indicators">
        <!-- TODO -->
    </ul>
    <!--圖片容器-->
    <div class="carousel-inner" role="listbox"
 
>
        <!-- TODO -->
    </div>
    <!--按鈕容器-->
    <a data-slide="prev" data- class="left carousel-control" href="#myCarousel">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span
 
>
    </a>
    <a data-slide="next" class="right carousel-control" href="#myCarousel">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

<!-- slide模板 -->
<
 
script type="text/template" id="slideTemplate">
    <% for (let i = 0; i < list.length; i++) { %>
        <li data-target="#myCarousel" class="<%= i==0?'active': ''%>" data-slide-to="<%= i%>"></li>
    <% } %>

    <!--<li data-target="#myCarousel" data-slide-to="1"></li>-->
    <!--<li data-target="#myCarousel" data-slide-to="2"></li>-->
</script>
<!-- banner模板 -->
<script type="text/template" id="bannerTemplate">
    <% for (let i = 0; i < list.length; i++) { %>
    <% let item = list[i]; %>
        <div class="item <%= i==0?'active': ''%>">
            <% if (flag) { %>
                <a href="" class="m-banner-img"><img src="<%= item.mUrl %>" alt=""></a>
            <% } else { %>
                <a href="" class="pc-banner-img" style="background-image: url(<%= item.pcUrl%>);"></a>
            <% } %>
        </div>
    <% } %>
    
</script>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="lib/artTemplate/template-native.js"></script>
<script src="js/carousel.js"></script>
<script>
    $(function(){
        // 迴圈輪播到上一個專案
        $(".prev-slide").click(function(){
            $("#myCarousel").carousel('prev');
        });
        // 迴圈輪播到下一個專案
        $(".next-slide").click(function(){
            $("#myCarousel").carousel('next');
        });
    });
</script>

.pc-banner-img {
    display: block;
    width: 100%;
    height: 400px;
    background-size: cover;
    background: no-repeat center;
}
.m-banner-img {
    display: block;
    width: 100%;
}
.m-banner-img img {
    display: block;
    width: 100%;
}

/**
 * JavaScript檔案
 * Time: 2018/9/18 15:08
 * Author: SanPhantom
 * Feature:
 */

$(function () {
    banner();
});


let banner = function () {
    //1、獲取資料

    let getData = function (callback) {
        $.ajax({
            type: 'get',
            url: 'js/data.json',
            data: '',
            dataType: 'json',
            success: function (res) {
                callback && callback(res);
            },
            error: function (res) {
                console.log(res);
            }
        });
    };

    let render = function () {
        getData(function (res) {
            console.log(res);

            let slideHtml = template('slideTemplate', {list: res});
            console.log(slideHtml);
            $('.carousel-indicators').html(slideHtml);
            //當裝置尺寸小於768px
            let isMobile = $(window).width() < 768;
            console.log(isMobile);
            let bannerHtml = template('bannerTemplate', {list: res, flag: isMobile});
            console.log(bannerHtml);
            $(".carousel-inner").html(bannerHtml);
        });
    };

    // render();

    $(window).on('resize', function () {
        console.log("123");
        render();
        console.log("123");
    }).trigger('resize');
    
    //2、通過不同的裝置尺寸渲染對應的圖片
    //2.1、準備資料
    //2.2、通過模板引擎渲染  art-template
    //2.3、測試的功能  resize
    //2.4、移動端的手勢切換  touch
};



/**
 * 模板引擎：以業務邏輯層和表現層相分離為目的，將規定的格式程式碼的模組轉化為業務資料的演算法實現
 * 1、準備資料
 * 2、下載template-native.js  -----原生語法的js外掛
 * 3、引入外掛
 * 4、建立模板：在HTML頁面建立<script type='text/template' id=''></script>
 * 5、把資料使用在模板中
 *      兩個引數：template('關聯的id名'，必須是物件{方法名對應的資料})
 */