<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 轮播(Carousel)指标 -->
<ol class="carousel-indicators">
<c:forEach var="item" items="${model}" varStatus="go">
<c:if test="${go.count==1}">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
</c:if>
<c:if test="${go.count!=1}">
<li data-target="#myCarousel" data-slide-to="${go.count}"></li>
</c:if>
</c:forEach>
</ol>
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner" role="listbox">
<c:forEach var="i" items="${model}" varStatus="go">
<c:if test="${go.count==1}">
<div class="item active">
<img src="${i.imgurl}" alt="${i.description}" >
<div class="carousel-caption">
<h3 data-animation="animated bounceInLeft">
This is the caption for slide 1
</h3>
<h3 data-animation="animated bounceInRight">
This is the caption for slide 1
</h3>
<button class="btn btn-primary btn-lg"
data-animation="animated zoomInUp">Button</button>
</div>
</div>
</c:if>
<c:if test="${go.count!=1}">
<div class="item">
<img src="${i.imgurl}" alt="${i.description}" >
<!-- 添加动画效果animated ,动画循环infinite -->
<div class="carousel-caption animated rotateIn">
<h3 class="icon-container" data-animation="animated bounceInDown">
<span class="glyphicon glyphicon-heart"></span>
</h3>
<h3 data-animation="animated bounceInUp">
This is the caption for slide 2
</h3>
<button class="btn btn-primary btn-lg"
data-animation="animated zoomInRight">Button</button>
</div>
</div>
</c:if>
</c:forEach>
</div>
<!-- 轮播(Carousel)导航 -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script type="text/javascript">
var $myCarousel = $('#myCarousel');
$myCarousel.carousel();
function doAnimations(elems) {
var animEndEv = 'webkitAnimationEnd animationend';
elems.each(function () {
var $this = $(this),
$animationType = $this.data('animation');
$this.addClass($animationType).one(animEndEv, function () {
$this.removeClass($animationType);
})
})
}
var $firstAnimatingElems = $myCarousel.find('.item:first')
.find('[data-animation ^= "animated"]');
doAnimations($firstAnimatingElems);
$myCarousel.carousel('pause');
$myCarousel.on('slide.bs.carousel', function (e) {
var $animatingElems = $(e.relatedTarget)
.find("[data-animation ^= 'animated']");
doAnimations($animatingElems);
})
</script>