bootstrap 轮播图动画效果

最新推荐文章于 2024-07-16 06:19:11 发布

桑丘紫言

最新推荐文章于 2024-07-16 06:19:11 发布

阅读量1.9k

点赞数

分类专栏： html bootstrap

本文链接：https://blog.csdn.net/weixin_39209728/article/details/85774837

版权

html 同时被 2 个专栏收录

5 篇文章

订阅专栏

bootstrap

1 篇文章

订阅专栏

本文详细介绍了如何使用HTML5、CSS3和JavaScript创建带有动画效果的轮播图组件，包括图片切换、按钮动画及指示器的实现方法。通过实战案例，读者将学会如何为轮播图添加平滑过渡和吸引眼球的动画，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>