-
Notifications
You must be signed in to change notification settings - Fork 0
/
标准轮播.html
43 lines (43 loc) · 1.84 KB
/
标准轮播.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="charset=utf-8">
<title>Bootstrap轮播实例</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
#myCarousel{
width:800px;
}
</style>
</head>
<body>
<div id="myCarousel" class="carousel slide">
<!--轮播(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>
</ol>
<!--轮播(Carousel)项目-->
<div class="carousel-inner">
<div class="item active">
<img src="slide1.png" alt="First slide">
<div class="carousel-caption">标题1</div>
</div>
<div class="item">
<img src="slide2.png" alt="Second slide">
<div class="carousel-caption">标题2</div>
</div>
<div class="item">
<img src="slide3.png" alt="Third slide">
<div class="carousel-caption">标题3</div>
</div>
</div>
<!--轮播(Carousel)导航-->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</body>
</html>