template 模版引擎 ——轮播图

html源代码：

<div id="scrollPic" class="carousel slide" data-scrollPic>
            <!-- 轮播（Carousel）指标 -->
   <ol class="carousel-indicators">
       <li data-target="#scrollPic" data-slide-to="0" class="active"></li>
       <li data-target="#scrollPic" data-slide-to="1"></li>
       <li data-target="#scrollPic" data-slide-to="2"></li>
   </ol>

            <!-- 轮播（Carousel）项目 -->
   <div class="carousel-inner" >
        <div class="item active">
           <a href="#"><img class="img-scroll" src="/images/1.jpg" alt="First slide"></a>
        </div>
        <div class="item ">
           <a href="#"><img class="img-scroll" src="/images/2.jpg" alt="First slide"></a>
       </div>
       <div class="item ">
          <a href="#"><img class="img-scroll" src="/images/3.jpg" alt="First slide"></a>
       </div>

  </div>
            <!-- 轮播（Carousel）导航 -->
  <a class="left carousel-control" href="#scrollPic" role="button" data-slide="prev">
      <span class="iconfont chevron-left" aria-hidden="true">&#xe601;</span>
      <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#scrollPic" role="button" data-slide="next">
       <span class="iconfont chevron-right" aria-hidden="true">&#xe627;</span>
       <span class="sr-only">Next</span>
  </a>
</div>

要实现的效果：

图片滚动，左右箭头可点击，下面原点跟随图片滚动

用代码开始实现：

html页面代码：

 <div id="scrollPic" class="carousel slide "  data-scrollPic>
            <!-- 轮播（Carousel）指标 -->

</div>

模版引擎代码：

<!--轮播图-->
<xmp id="scrollTemp" hidden>

    <%var length=list.length;if(length>5){length=5;}%>
    <ol class="carousel-indicators">
        <%for(var i=0; i< length; i++){if(i==0){%>
        <li data-target="#scrollPic" data-slide-to="0" class="active"></li>
        <%}else{%>
        <li data-target="#scrollPic" data-slide-to="<%=i%>" ></li>
        <%}}%>
    </ol>
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner" >
        <%for(var i=0; i< length; i++){%>
        <div class="item <%if(i==0){%>active<%}%>">
            <a href="javascript:window.open('<%=list[i].href%>')"><img class="img-scroll" src="<%=list[i].coverImageUrl%>" alt="First slide"></a>
        </div>
        <%}%>

    </div>

    <%if(length>1){%>
    <!-- 轮播（Carousel）导航 -->
    <a class="left carousel-control" href="#scrollPic" role="button" data-slide="prev">
        <span class="iconfont chevron-left" aria-hidden="true">&#xe601;</span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#scrollPic" role="button" data-slide="next">
        <span class="iconfont chevron-right" aria-hidden="true">&#xe627;</span>
        <span class="sr-only">Next</span>
    </a>
<%}%>

</xmp>

js代码：

//初始化轮播图
window.resource("cmsApiArticleList", {columnCode: 'banner'}, function (data) {
    var temp = _.template($("#scrollTemp").text());
    $('[data-scrollPic]').html(temp(data));
}, false);