bootstrap的轮播图怎么实现

第一步，打开电脑中安装的Sublime Text3，新建demo文件夹用来存放文件，在里面新建一个html文件，通过Tab快捷键迅速创建一个html模板，并命名标题。如图：

第二步，在顶部head标签里引入外部JQuery和Bootstrap库文件。下载好相关的库文件后，放在相应的文件夹里。我们将JS文件放在Body标签底部。注意要引入jQuery库，因为Bootstrap框架是以jQuery库文件为基础的。并且要放在的Bootstrap库文件上面，不然不会有效果。如图：

第三步，添加轮播图片的容器。为了便于查看，在最外边添加一个“container”的div，再加一个子div，类名为carousel，并且给这个容器定义一个名为“slidershow”的ID，方便后面的data属性来声明触发。

<div id="slidershow" class="carousel"></div>

第四步，设计轮播图片的计数器。在容器内部添加计数器，加上一个名为“carousel-indicators”的类，用于显示图片的播放顺序。其中，data-target="#slidershow" ，用于触发声明事件的目标。代码如下：

<ol class="carousel-indicators">
 <li class="active" data-target="#slidershow" data-slide-to="0"></li>
 <li data-target="#slidershow" data-slide-to="1"></li>
 <li data-target="#slidershow" data-slide-to="2"></li>
 <li data-target="#slidershow" data-slide-to="3"></li> 
</ol>

第五步，设计轮播图片的播放区域。这个区域主要用来放轮播的图片。加一个名为“carousel-inner”的类，并放置在carousel容器中，再加一个名为“item”的容器来放置每张轮播图片。代码如下：

<div class="carousel-inner">
 <div class="item active">
 <img src="images/1.jpg" alt="" style="width:100%;" /> 
 </div> 
</div>