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"></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"></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"></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"></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);