Bootstrap下的轮播图.md

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名'，必须是对象{方法名对应的数据})
 */