1、轮播图需要引入js文件

  1. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  2.         integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
  3.         crossorigin="anonymous"></script>
  4. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
  5.     integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
  6.     crossorigin="anonymous"></script>

2、幻灯片：

image.png

  1. <div class="row">
  2.     <div class="col">
  3.         <div class="carousel slide carousel-fade" data-ride="carousel"><!-- carousel：轮播图的class --><!-- data-ride="carousel":js交互，运动 -->
  4.             <!-- slide：滚动效果 carousel-fade：透明度变化-->
  5.             <div class="carousel-inner"><!-- carousel-inner：专门存放图片 -->
  6.                 <div class="carousel-item active"><!-- active：轮播图需要有激活！！！ -->
  7.                     <!-- 通过transtion运动 -->
  8.                     <img src="images/pic_01.jpg" class="img-fluid"><!-- 第一种尺寸：响应式img-fluid，第二种：d-block，给w-100 -->
  9.                 </div>
  10.                 <div class="carousel-item">
  11.                     <img src="images/pic_02.jpg" class="img-fluid">
  12.                 </div>
  13.                 <div class="carousel-item">
  14.                     <img src="images/pic_03.jpg" class="img-fluid">
  15.                 </div>
  16.             </div>
  17.         </div>
  18.     </div>
  19. </div>

3、带控制功能的轮播图

image.png

  1. <div class="row mt-5">
  2.     <div class="col">
  3.         <div class="carousel slide" data-ride="carousel" id="control"><!--control：自己起名字  -->
  4.             <div class="carousel-inner">
  5.                 <div class="carousel-item active">
  6.                     <img src="images/pic_01.jpg" class="img-fluid">
  7.                 </div>
  8.                 <div class="carousel-item">
  9.                     <img src="images/pic_02.jpg" class="img-fluid">
  10.                 </div>
  11.                 <div class="carousel-item">
  12.                     <img src="images/pic_03.jpg" class="img-fluid">
  13.                 </div>
  14.             </div>
  15.             <!-- 添加左右箭头 -->  <!-- 左右空间很大，照顾到了用户 -->
  16.             <a href="#control" class="carousel-control-prev" data-slide="prev">
  17.                 <span class="carousel-control-prev-icon"></span>
  18.             </a>
  19.             <a href="#control" class="carousel-control-next" data-slide="next">
  20.                 <span class="carousel-control-next-icon"></span>
  21.             </a>
  22.         </div>
  23.     </div>
  24. </div>

4、包含指示器功能的轮播图

image.png

  1. <div class="row mt-5">
  2.     <div class="col">
  3.         <div class="carousel slide" data-ride="carousel" id="indicators"><!-- 注意id不能重复 -->
  4.             <div class="carousel-inner">
  5.                 <div class="carousel-item active">
  6.                     <img src="images/pic_01.jpg" class="img-fluid">
  7.                 </div>
  8.                 <div class="carousel-item">
  9.                     <img src="images/pic_02.jpg" class="img-fluid">
  10.                 </div>
  11.                 <div class="carousel-item">
  12.                     <img src="images/pic_03.jpg" class="img-fluid">
  13.                 </div>
  14.             </div>
  15.             <!-- 添加左右箭头 -->
  16.             <a href="#indicators" class="carousel-control-prev" data-slide="prev">
  17.                 <span class="carousel-control-prev-icon"></span>
  18.             </a>
  19.             <a href="#indicators" class="carousel-control-next" data-slide="next">
  20.                 <span class="carousel-control-next-icon"></span>
  21.             </a>
  22.             <!-- 添加指示器 -->
  23.             <ol class="carousel-indicators"> <!-- ol：有序列表 -->
  24.                 <li data-target="#indicators" data-slide-to="0" class="active"></li><!-- data-slide-to：图片索引值 -->
  25.                 <li data-target="#indicators" data-slide-to="1"></li>
  26.                 <li data-target="#indicators" data-slide-to="2"></li>
  27.             </ol>
  28.         </div>
  29.     </div>
  30. </div>

5、包含字幕的轮播图

image.png

  1. <div class="row mt-5">
  2.     <div class="col">
  3.         <div class="carousel slide" data-ride="carousel" id="captions">
  4.             <div class="carousel-inner">
  5.                 <div class="carousel-item active">
  6.                     <img src="images/pic_01.jpg" class="img-fluid">
  7.                     <div class="carousel-caption text-danger">  <!-- 字幕 -->
  8.                         <h5>这是第1张图</h5>
  9.                         <p>这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明</p>
  10.                     </div>
  11.                 </div>
  12.                 <div class="carousel-item">
  13.                     <img src="images/pic_02.jpg" class="img-fluid">
  14.                     <div class="carousel-caption text-danger">
  15.                         <h5>这是第2张图</h5>
  16.                         <p>这是第2张图的说明这是第1张图的说明这是第2张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明</p>
  17.                     </div>
  18.                 </div>
  19.                 <div class="carousel-item">
  20.                     <img src="images/pic_03.jpg" class="img-fluid">
  21.                     <div class="carousel-caption text-danger">
  22.                         <h5>这是第3张图</h5>
  23.                         <p>这是第3张图的说明这是第3张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明</p>
  24.                     </div>
  25.                 </div>
  26.             </div>
  27.             <!-- 添加左右箭头 -->
  28.             <a href="#captions" class="carousel-control-prev" data-slide="prev">
  29.                 <span class="carousel-control-prev-icon"></span>
  30.             </a>
  31.             <a href="#captions" class="carousel-control-next" data-slide="next">
  32.                 <span class="carousel-control-next-icon"></span>
  33.             </a>
  34.             <!-- 添加指示器 -->
  35.             <ol class="carousel-indicators">
  36.                 <li data-target="#captions" data-slide-to="0" class="active"></li>
  37.                 <li data-target="#captions" data-slide-to="1"></li>
  38.                 <li data-target="#captions" data-slide-to="2"></li>
  39.             </ol>
  40.         </div>
  41.     </div>
  42. </div>

6、设置轮播图的选项

image.png

  1. <div class="row mt-5">
  2.     <div class="col">
  3.         <div class="carousel slide" id="options" data-ride="carousel" data-interval='2000' data-keyboard='true'
  4.             data-pause='false' data-wrap='true'><!-- data-interval='2000'：时间2s，也可单独给图片设置-->
  5.             <!-- data-keyboard='true'：可以键盘操纵？？？ -->
  6.             <!-- data-pause='hover'：鼠标悬停在上面轮播图不会运动 -->
  7.             <!-- data-wrap='true'：决定轮播图是否循环播放 -->
  8.             <div class="carousel-inner">
  9.                 <div class="carousel-item active">
  10.                     <img src="images/pic_01.jpg" class="img-fluid">
  11.                 </div>
  12.                 <div class="carousel-item">
  13.                     <img src="images/pic_02.jpg" class="img-fluid">
  14.                 </div>
  15.                 <div class="carousel-item">
  16.                     <img src="images/pic_03.jpg" class="img-fluid">
  17.                 </div>
  18.             </div>
  19.             <!-- 添加左右箭头 -->
  20.             <a href="#options" class="carousel-control-prev" data-slide="prev">
  21.                 <span class="carousel-control-prev-icon"></span>
  22.             </a>
  23.             <a href="#options" class="carousel-control-next" data-slide="next">
  24.                 <span class="carousel-control-next-icon"></span>
  25.             </a>
  26.             <!-- 添加指示器 -->
  27.             <ol class="carousel-indicators">
  28.                 <li data-target="#options" data-slide-to="0" class="active"></li>
  29.                 <li data-target="#options" data-slide-to="1"></li>
  30.                 <li data-target="#options" data-slide-to="2"></li>
  31.             </ol>
  32.         </div>
  33.     </div>
  34. </div>

7、方法与事件：通过js控制

image.png

<div class="row mt-5">
    <div class="col">
        <div class="carousel slide" id="methods">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="images/pic_01.jpg" class="img-fluid">
                </div>
                <div class="carousel-item">
                    <img src="images/pic_02.jpg" class="img-fluid">
                </div>
                <div class="carousel-item">
                    <img src="images/pic_03.jpg" class="img-fluid">
                </div>
            </div>
            <!-- 添加左右箭头 -->
            <a href="javascript:;" class="carousel-control-prev prevBtn"><!-- 没有href页面会刷新 -->
                <span class="carousel-control-prev-icon"></span>
            </a>
            <a href="javascript:;" class="carousel-control-next nextBtn">
                <span class="carousel-control-next-icon"></span>
            </a>
            <!-- 添加指示器 -->
            <ol class="carousel-indicators indicatorsBtn">
                <li class="active"></li>
                <li></li>
                <li></li>
            </ol>
        </div>
        <button class="btn btn-primary play">开始</button><!-- btn-primary play：自己编的 -->
        <button class="btn btn-primary pause">暂停</button>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
<script>
    //初始化以及开始播放
    $('.play').click(function () {
        $('#methods').carousel({
            interval: 2000
        });
        $('#methods').carousel('cycle');    //提供的cycle的方法
    });
    //暂停播放
    $('.pause').click(function () {
        $('#methods').carousel('pause');
    });
    //上一张功能
    $('.prevBtn').click(function () {
        $('#methods').carousel('prev');
    });
    //下一张功能
    $('.nextBtn').click(function () {
        $('#methods').carousel('next');
    });
    //指示器点击的功能
    $('.indicatorsBtn li').each(function (index, element) { //element：循环到的li
        $(element).click(function () {
            $('#methods').carousel(index)
        });
    });
    //两个事件（固定事件名）
    $('#methods').on('slide.bs.carousel', function (ev) {   //开始切换的事件
        /*console.log(
            ev.direction,   //当前走的方向
            ev.relatedTarget,   //当前走的哪一个图片（DOM）
            ev.from,    //当前走的图片的索引
            ev.to,      //要走到的图片的索引
        );*/    
        console.log('开始走');
    });
    $('#methods').on('slid.bs.carousel', function () {  //结束切换的事件
        // do something…
        console.log('走完了');
    });
</script>