代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 轮播（Carousel）插件的标题</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.item,.carousel-caption{
width: 100%;
height: 300px;
}
.carousel-caption{
left: 0;
top: 0;
padding: 0;
}
</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" style="width: 1000px;">
<div class="item active" style="">
<div class="carousel-caption">
<img style="display: inline-block;" width="300" height="300" src="http://static.runoob.com/images/mix/img_fjords_wide.jpg" >
<img style="display: inline-block;" width="300" height="300" src="http://static.runoob.com/images/mix/img_fjords_wide.jpg" >
<img style="display: inline-block;" width="300" height="300" src="http://static.runoob.com/images/mix/img_fjords_wide.jpg" >
</div>
</div>
<div class="item " style="">
<div class="carousel-caption">
<img style="display: inline-block;" width="300" height="300" src="http://static.runoob.com/images/mix/img_fjords_wide.jpg" >
<img style="display: inline-block;" width="300" height="300" src="http://static.runoob.com/images/mix/img_fjords_wide.jpg" >
<img style="display: inline-block;" width="300" height="300" src="http://static.runoob.com/images/mix/img_fjords_wide.jpg" >
</div>
</div>
<div class="item" style="">
<div class="carousel-caption">
<img style="display: inline-block;" width="300" height="300" src="http://static.runoob.com/images/mix/img_fjords_wide.jpg" >
<img style="display: inline-block;" width="300" height="300" src="http://static.runoob.com/images/mix/img_fjords_wide.jpg" >
<img style="display: inline-block;" width="300" height="300" src="http://static.runoob.com/images/mix/img_fjords_wide.jpg" >
</div>
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="carousel-control" href="#myCarousel" style="left: -94px;" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="false"></span>
<span class="sr-only">Previous</span>
</a>
<a class=" carousel-control" href="#myCarousel" style="left: 850px;" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#myCarousel').carousel()
})
</script>
</body>
</html>
效果:
