HTML实现轮播

HTML实现轮播

---

代码

<div id="myCarousel" class="carousel slide" style="margin-top: 0px" data-ride="carousel" data-interval="2000">
						<!-- 轮播（Carousel）指标 -->
							<ol class="carousel-indicators">
								<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
								<li data-target="#myCarousel" data-slide-to="1"></li>
								<li data-target="#myCarousel" data-slide-to="2"></li>
								<li data-target="#myCarousel" data-slide-to="3"></li>
							</ol>
							<!-- 轮播（Carousel）项目 -->
							<div class="carousel-inner">
								<div class="item active" style="height: 300px">
									<img src="static/image/pipline.png" alt="First slide"  >
								</div>
								<div class="item" style="height:  300px">
									<img src="static/image/technology.png" alt="Second slide"  >
								</div>
								<div class="item" style="height:  300px">
									<img src="static/image/carouselSampleView.png" alt="Three slide"  >
								</div>
								<div class="item" style="height:  300px">
									<img src="static/image/carouselEcharts.png" alt="Four slide"  >
								</div>
							</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>

效果

data-interval指图片轮播间隔时间。
鼠标进入暂停轮播循环，离开则恢复。
data-slide指改变轮播顺序，接受关键字previous或是next。