Bootstrap 轮播图设置
Bootstrap 轮播图设置
<!-- 首先页面要引入了 bootstrap.css bootstrap和jQuery的js -->
<body style="background: #eee">
<!-- 轮播图开始 -->
<div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="5000">
<!-- 轮播指标 -->
<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>
<!--图片容器-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="${contextPath}/system/img/ZGMY01.png" alt="ZGMY01.png"/>
<!--添加对应标题和内容-->
<!-- <div class="carousel-caption">
<h2>图一</h2>
</div> -->
</div>
<div class="item">
<img src="${contextPath}/system/img/ZGMY02.png" alt="ZGMY02.png"/>
<!--添加对应标题和内容-->
<!-- <div class="carousel-caption">
<h4>图二</h4>
</div> -->
</div>
<div class="item">
<img src="${contextPath}/system/img/ZGMY03.png" alt="ZGMY03.png"/>
<!--添加对应标题和内容-->
<!-- <div class="carousel-caption">
<h4>图三</h4>
</div> -->
</div>
<!--轮播导航 左右按钮-->
<a class="carousel-control-prev" href="#carousel-example-generic" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#carousel-example-generic" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
<!-- 轮播图结束 -->
</body>