1.首先在bootstrap官网下载压缩文件,并将压缩文件解压,将其中的bootstrap.min.css文件复制放在你自己网页的css文件夹下,再将bootstrap.min.js文件放在js文件夹下,这里需要用到jQuery文件,可以在jQuery官网下载或者在线引用。
2.在自己网页中将上述文件引用,代码如下:
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
在这里一定要注意将jquery-3.3.1.min.js文件放在bootstrap.min.js文件之前,要不然bootstrap.min.js文件的东西不能正常使用。
3.html网页中的轮播图主要代码如下:
<div id="box" class="carousel slide" data-ride="carousel">
<!--设置轮播图图片顺序-->
<ol class="carousel-indicators">
<li data-target="#box" data-slide-to="0" class="active"></li>
<li data- target="#box" data-slide-to="1"></li><li data- target="#box" data-slide-to="2"></li>
</ol>
<!--设置轮播图片-->
<div class="carousel-inner">
<div class="item active">
<img src="img/banner01.jpg" style="width: 100%;" alt=""/>
</div>
<div class="item">
<img src="img/banner02.jpg" style="width: 100%;" alt=""/>
</div>
<div class="item">
<img src="img/banner03.jpg" style="width: 100%;" alt=""/>
</div>
</div>
<a class="left carousel-control" href="#box" data-slide="prev" role="button">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#box" data-slide="next" role="button">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
其中部分js代码如下:
<!--轮播图滚动播放和按钮控制js代码-->
<script type="text/javascript">
$(function(){
$(".carousel").carousel({
interval:3000 //设置图片3秒钟滚动一次
})
$(".carousel").carousel("cycle")
});
</script>
这样就能利用bootstrap实现轮播图。