第十七谈：轮播效果

本节课我们来开始学习 Bootstrap 的提供的轮播效果组件。

一．轮播效果

1. 一个最简单的经典幻灯片轮播效果，如下：

      <div class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
              <div class="carousel-item active">
                  <img src="img/1.png" class="w-100" alt="">
              </div>
              <div class="carousel-item">
                  <img src="img/2.png" class="w-100" alt="">
              </div>
              <div class="carousel-item">
                  <img src="img/3.png" class="w-100" alt="">
              </div>
          </div>
      </div>

2. 给轮播幻灯片两侧加上切换按钮，具体如下：

      <div id="carousel" class="carousel slide" data-ride="carousel">
          ...
          <a class="carousel-control-prev" href="#carousel" data-slide="prev">
              <span class="carousel-control-prev-icon"></span>
          </a>
          <a class="carousel-control-next" href="#carousel" data-slide="next">
              <span class="carousel-control-next-icon"></span>
          </a>
      </div>

3. 给轮播幻灯片底部加上切换按钮，具体如下：

      <div id="carousel" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
              <li data-target="#carousel" data-slide-to="0" class="active"></li>
              <li data-target="#carousel" data-slide-to="1"></li>
              <li data-target="#carousel" data-slide-to="2"></li>
          </ol>
          ...
      </div>

4. 给轮播幻灯片底加上一些字符说明，具体如下：

      <div class="carousel-item active">
          <img src="img/1.png" class="w-100" alt="">
          <div class="carousel-caption">
              <h5>Bootstrap4.x</h5>
              <p>这是一款前端样式库，很好用，样式也比较多，大概如此吧...</p>
          </div>
      </div>

5. 给轮播幻灯片设置渐进式轮播效果，具体如下：

      class="carousel slide carousel-fade"

6. 通过 JS 控制，来设置轮播的各项数值，代替 data-ride="carousel"；

      <script>
          $('.carousel').carousel({
              //轮播间隔 500 毫秒
              interval: 500,
          });
      </script>

7. 通过 JS 控制，使用按钮来控制轮播器的各项操作；

      <script>
          $('.button').click(function() {
              //开始播放
              $('.carousel').carousel('cycle');
              //停止播放
              $('.carousel').carousel('pause');
              //上一张
              $('.carousel').carousel('prve');
              //下一张
              $('.carousel').carousel('next');
              //轮播到指定的图片
              $('.carousel').carousel(2);
          });
      </script>