Bootstrap轮播插件，代码步骤使用该插件必须引入bootstrap.js或者压缩版的bootstrap.min.①

轮播插件：

Bootstrap轮播插件是一种灵活的响应式的向站点添加滑块的方式
轮播的内容可以是，图像，内嵌框架，视频或者其他想要放置的任何类型的内容
使用该插件必须引入bootstrap.js或者压缩版的bootstrap.min.js
轮播图实现主要有三部分构成：
①.轮播的图片
②.轮播图片的计时器
③.轮播图片的控制器

1.设计轮播容器：

使用.carousel类设计轮播图片的容器，并为该容器添加id，方便后面的使用

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

2.设计轮播计数器：

在轮播容器div.carousel的内部添加轮播计算器.carousel-indicators类,
其主要功能是显示当前图片的播放顺序(有几张图片就放置几个li)，
一般采用有序列表来制作，该内容放在轮播容器内

  <ol class="carousel-indicators">
           <li class="active">1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
           <li>5</li>
       </ol>

3.设计轮播图片控制器：

很多时候轮播图片还具有一个向前播放和向后播放的控制器，
在.carousel中通过.carousel-control类配合left和right实现，
其中left表示向前播放，right表示向后播放，这部分也放在carousel轮播容器内

     <a href="" class="left carousel-control">
         <span class="glyphicon glyphicon-chevron-left"></span>
     </a>
     <a href="" class="right carousel-control">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>

4.添加图片描述：

Bootstrap中可以使用div标签添加.carousel-caption类为图片添加描述信息，
这部分内容只需要在div.item中图片底部添加对应的代码

 <div class="carousel-caption">
       <h3>图片标题</h3>
       <p>描述内容</p>
   </div>

声明式触发轮播：

1.声明式方法 是通过定义data属性来实现，data属性可以很容易地控制轮播的位置
2.data-ride属性：取值carousel，并且将其定义在carousel上
3.data-target属性：取值carousel定义的ID名或者跟其他样式识别符，
4.data-slide属性:取值有两个，prev表示向后滚动，next表示向前滚动，
该属性值同样定义在轮播图控制器的a链接上，同时设置控制器href值为容器carousel的id名或其他样式识别符
5.data-slide-to属性：用来传递某个帧的下标，比如data-silde-to="2"，可以直接跳转到这个指定的帧，同样定义在轮播图计数器的每个li标签上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible"content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播插件</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body >
  <div id="slidershow" class="carousel slide" data-ride="carousel">
      <!-- 设置图片轮播计数器 -->
      <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>
      </ol>

      <!-- 设置轮播图片 -->
      <div class="carousel-inner">
          <div class="item active">
              <a href="#">
                  <img src="images/3.jpg" alt="" style="height: 400px;margin:0 auto;">
              </a>
              <div class="carousel-caption">
                  <h3>风景1</h3>
                  <p>风光旖旎</p>
              </div>
          </div>

          <div class="item">
            <a href="#">
                <img src="images/4.jpg" alt="" style="height: 400px;margin:0 auto;">
            </a>
            <div class="carousel-caption">
                <h3>风景2</h3>
                <p>山川秀丽</p>
            </div>
        </div>

        <div class="item">
            <a href="#">
                <img src="images/5.jpg" alt="" style="height: 400px;margin:0 auto;">
            </a>
            <div class="carousel-caption">
                <h3>风景3</h3>
                <p>大好河山</p>
            </div>
        </div>

      </div>

      <!-- 设置图片控制器 -->
      <a href="#slidershow" class="left carousel-control" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a href="#slidershow" class="right carousel-control" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
  </div>
</body>
<script src="jquery/jquery-1.11.0.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>

在这里插入图片描述