BootStrap Carousel淡入淡出效果

1、BootStrap Carousel的基本轮播效果

<html>
	<body>
		<!--banner-->
			<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="5000">
			<!-- 轮播(Carousel)指标 -->
			<ol class="carousel-indicators">
				<li data-target="#carousel" data-slide-to="0" class="active"></li>
				<li data-target="#carousel" data-slide-to="1"></li>
				<li data-target="#carousel" data-slide-to="2"></li>
				<li data-target="#carousel" data-slide-to="3"></li>
				<li data-target="#carousel" data-slide-to="4"></li>
				<li data-target="#carousel" data-slide-to="5"></li>
			</ol>   
			<!-- 轮播(Carousel)项目 -->
			<div class="carousel-inner">
				<div class="item active">
					<img src="img/adv_03.jpg" width="100%">
				</div>
				<div class="item">
					<img src="img/adv_04.jpg" width="100%">
				</div>
				<div class="item">
					<img src="img/adv_05.jpg" width="100%">
				</div>
				<div class="item">
					<img src="img/adv_06.jpg" width="100%">
				</div>
				<div class="item">
					<img src="img/adv_01.jpg" width="100%">
				</div>
				<div class="item">
					<img src="img/adv_02.jpg" width="100%">
				</div>
			</div>
		</div>
		<!-- 轮播(Carousel)导航 -->
		</div>
		<!--banner-->
	</body>
</html>

2、加入淡入淡出样式

<!--添加淡入淡出的css-->
<style>
.carousel-fade .carousel-inner .item{ opacity:0; -webkit-transition-property:opacity;-moz-transition-property:opacity ; -ms-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity ;}

.carousel-fade .carousel-inner .active{ opacity: 1;}
.carousel-fade .carousel-inner .active.left,.carousel-fade .carousel-inner .active.right{left: 0;opacity: 0;}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {opacity: 1;}
</style>

引用地址:https://blog.csdn.net/wen5775/article/details/70159708

发表评论

电子邮件地址不会被公开。 必填项已用*标注