<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap-theme.css"/>
<script src="bootstrap-3.3.7-dist/js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="myCarousel" class="carousel slide" style="width: 500px;">
<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>
<div class="carousel-inner">
<div class="item active">
<img src="img/1.jpg"alt="First slide"/>
<div class="carousel-caption">湖面</div>
</div>
<div class="item">
<img src="img/2.jpg"alt="Second slide"/>
<div class="carousel-caption">山顶</div>
</div>
<div class="item">
<img src="img/3.jpg"alt="Third slide"/>
<div class="carousel-caption">沼泽</div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide = "prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide = "next">›</a>
</div>
<div id="myCarousel" class="carousel slide" data-interval = "1000"data-ride = "carousel" data-pause = "false"data-wrap = "false" style="width: 500px;">
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
