利用bootstrap实现轮播图

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实现轮播图。