bootstrap实现轮播图 --设置图片大小等于父容器大小

运行前需要首先引入bootstrap 和jquery文件并修改图片路径<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="style

兜里ヌ有糖

6320人浏览 · 2021-01-30 18:09:05

兜里ヌ有糖 · 2021-01-30 18:09:05 发布

运行前需要首先引入bootstrap 和jquery文件并修改图片路径

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<link rel="stylesheet" href="../../css/bootstrap.min.css">
		<script src="../../js/jquery-3.3.1.min.js"></script>
		<script src="../../js/bootstrap.min.js"></script>
		<title>bootstrap轮播图</title>
		<style type="text/css">
			html,
			body {
				width: 100%;
				height: 100%;
			}

			#myCarousel {
				width: 30%;
				margin-left: 20%;
				height: 300px;
			}

		</style>
	</head>
	<body>
		<div id="myCarousel" class="carousel slide">
			<!-- Indicators -->
			<ol class="carousel-indicators">
				<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
				<li data-target="#carousel-example-generic" data-slide-to="1"></li>
				<li data-target="#carousel-example-generic" data-slide-to="2"></li>
			</ol>

			<!-- Wrapper for slides -->
			<div class="carousel-inner" role="listbox">
				<div class="item active">
					<img src="../../img/a.jpg" alt="..." style="width:100%;height: 300px;">
				</div>
				<div class="item">
					<img src="../../img/b.jpg" alt="..." style="width:100%;height: 300px;">
				</div>

				<div class="item">
					<img src="../../img/c.jpg" alt="..." style="width:100%;height: 300px;">
				</div>
			</div>

			<!-- Controls -->
			<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>
	</body>
</html>