<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图片轮播</title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style type="text/css" >
#myCarousel{
width:700px;
height:454px;
margin: 0 auto;
}
.carousel-inner{
position:relative;
}
#num{
position:absolute;
top:380px;
left:300px;
}
</style>
</head>
<body>
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="images/adver01.jpg" alt="First slide">
</div>
<div class="item">
<img src="images/adver02.jpg" alt="Second slide">
</div>
<div class="item">
<img src="images/adver03.jpg" alt="Third slide">
</div>
<div class="item">
<img src="images/adver04.jpg" alt="Fourth slide">
</div>
<div class="item">
<img src="images/adver05.jpg" alt="Fifth slide">
</div>
<div class="item">
<img src="images/adver06.jpg" alt="Sixth slide">
</div>
</div>
<!-- 轮播（Carousel）指标 -->
<ul class="carousel-indicators" id="num">
<li data-target="#myCarousel" data-slide-to="0" class="active">1</li>
<li data-target="#myCarousel" data-slide-to="1">2</li>
<li data-target="#myCarousel" data-slide-to="2">3</li>
<li data-target="#myCarousel" data-slide-to="3">4</li>
<li data-target="#myCarousel" data-slide-to="4">5</li>
<li data-target="#myCarousel" data-slide-to="5">6</li>
</ul>
<!-- 轮播（Carousel）导航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">‹
</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›
</a>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
原文：http://www.cnblogs.com/alexanderthegreat/p/7125445.html