bootstrap 輪播圖動畫效果
阿新 • • 發佈:2019-01-07
<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>