bootstrap 实现图片轮播
原帖链接：http://user.qzone.qq.com/369175376/2
第一步：先添加css和js
<!--响应式，约束缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" >
<!---通知IE其支持的最新模式-->
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
第二步：创建一个容器
第二步：创建一个容器
<div class="container"></div>
2-1、创建一个carousel类的容器
<div class="carousel slide" ></div>
2-2、添加四个圆点标识
<ul class="carousel-indicators">
2-1、创建一个carousel类的容器
<div class="carousel slide" ></div>
2-2、添加四个圆点标识
<ul class="carousel-indicators">
<li class="active" data-target="#myCarousel" data-slide-to="0"></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>
</ul>
2-3、添加carousel-inner类的图片和文字提示
<div class="carousel-inner">
2-3、添加carousel-inner类的图片和文字提示
<div class="carousel-inner">
<div class="item active">
<img src="images/a.jpg"/>
<div class="carousel-caption">
轮播图的标题1
</div>
</div>
<div class="item">
<img src="images/b.jpg"/>
<div class="carousel-caption">
轮播图的标题2
</div>
</div>
<div class="item">
<img src="images/c.jpg"/>
<div class="carousel-caption">
轮播图的标题3
</div>
</div>
<div class="item">
<img src="images/d.jpg"/>
<div class="carousel-caption">
轮播图的标题4
</div>
</div>
</div>
2-4、添加左右两边的两个< >
<a class="carousel-control left" data-slide="prev" href="#myCarousel">
2-4、添加左右两边的两个< >
<a class="carousel-control left" data-slide="prev" href="#myCarousel">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" data-slide="next" href="#myCarousel">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
呈上完整代码：
呈上完整代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--响应式，约束缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" >
<!---通知IE其支持的最新模式-->
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
#myCarousel img{
width: 100%;
}
</style>
</head>
<body >
<div class="container">
<div class="carousel slide" id="myCarousel">
<!--标识符部分-->
<ul class="carousel-indicators">
<li class="active" data-target="#myCarousel" data-slide-to="0"></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>
</ul>
<div class="carousel-inner">
<div class="item active">
<img src="images/a.jpg"/>
<div class="carousel-caption">
轮播图的标题1
</div>
</div>
<div class="item">
<img src="images/b.jpg"/>
<div class="carousel-caption">
轮播图的标题2
</div>
</div>
<div class="item">
<img src="images/c.jpg"/>
<div class="carousel-caption">
轮播图的标题3
</div>
</div>
<div class="item">
<img src="images/d.jpg"/>
<div class="carousel-caption">
轮播图的标题4
</div>
</div>
</div>
<a class="carousel-control left" data-slide="prev" href="#myCarousel">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" data-slide="next" href="#myCarousel">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<script type="text/javascript">
$(function(){
$('#myCarousel').carousel({
internal:1000 //轮播的速度
});
});
</script>
</body>
</html> 