1. <div class="container">
    2.         <div class="row">
    3.             <div class="col">  slide  是否要滚动  carousel-fade 渐入渐出
    4.                 <div class="carousel slide carousel-fade" data-ride="carousel">
    5.                     <div class="carousel-inner">里面放的就是图片，也就是每一项
    6.                         <div class="carousel-item active">每一项里面可以放文字、图片、链接等active显示图片
    7.                             <img src="images/pic_01.jpg" class="img-fluid">
    8.                         </div>
    9.                         <div class="carousel-item">
    10.                             <img src="images/pic_02.jpg" class="img-fluid">
    11.                         </div>
    12.                         <div class="carousel-item">
    13.                             <img src="images/pic_03.jpg" class="img-fluid">
    14.                         </div>
    15.                     </div>
    16.                 </div>
    17.             </div>
    18.         </div>
    20.         <!-- 带控制功能的轮播图 -->
    21.         <div class="row mt-5">
    22.             <div class="col">
    23.                 <div class="carousel slide" data-ride="carousel" id="control">
    24.                     <div class="carousel-inner">
    25.                         <div class="carousel-item active">
    26.                             <img src="images/pic_01.jpg" class="img-fluid">
    27.                         </div>
    28.                         <div class="carousel-item">
    29.                             <img src="images/pic_02.jpg" class="img-fluid">
    30.                         </div>
    31.                         <div class="carousel-item">
    32.                             <img src="images/pic_03.jpg" class="img-fluid">
    33.                         </div>
    34.                     </div>
    36.                     <!-- 添加左右箭头 -->
    37.                     <a href="#control" class="carousel-control-prev" data-slide="prev">
    38.                         <span class="carousel-control-prev-icon"></span>
    39.                     </a>
    40.                     <a href="#control" class="carousel-control-next" data-slide="next">
    41.                         <span class="carousel-control-next-icon"></span>
    42.                     </a>
    43.                 </div>
    44.             </div>
    45.         </div>
    47.         <!-- 包含指示器功能的轮播图 -->
    48.         <div class="row mt-5">
    49.             <div class="col">
    50.                 <div class="carousel slide" data-ride="carousel" id="indicators">
    51.                     <div class="carousel-inner">
    52.                         <div class="carousel-item active">
    53.                             <img src="images/pic_01.jpg" class="img-fluid">
    54.                         </div>
    55.                         <div class="carousel-item">
    56.                             <img src="images/pic_02.jpg" class="img-fluid">
    57.                         </div>
    58.                         <div class="carousel-item">
    59.                             <img src="images/pic_03.jpg" class="img-fluid">
    60.                         </div>
    61.                     </div>
    63.                     <!-- 添加左右箭头 -->
    64.                     <a href="#indicators" class="carousel-control-prev" data-slide="prev">
    65.                         <span class="carousel-control-prev-icon"></span>
    66.                     </a>
    67.                     <a href="#indicators" class="carousel-control-next" data-slide="next">
    68.                         <span class="carousel-control-next-icon"></span>
    69.                     </a>
    71.                     <!-- 添加指示器 -->用ol是有序列表
    72.                     <ol class="carousel-indicators">
    73.                         <li data-target="#indicators" data-slide-to="0" class="active"></li>
    74.                         <li data-target="#indicators" data-slide-to="1"></li>
    75.                         <li data-target="#indicators" data-slide-to="2"></li>
    76.                     </ol>
    77.                 </div>
    78.             </div>
    79.         </div>
    81.         <!-- 包含字幕的轮播图 -->
    82.         <div class="row mt-5">
    83.             <div class="col">
    84.                 <div class="carousel slide" data-ride="carousel" id="captions">
    85.                     <div class="carousel-inner">
    86.                         <div class="carousel-item active">
    87.                             <img src="images/pic_01.jpg" class="img-fluid">
    88.                             <div class="carousel-caption text-danger">
    89.                                 <h5>这是第1张图</h5>
    90.                                 <p>这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明</p>
    91.                             </div>
    93.                         </div>
    94.                         <div class="carousel-item">
    95.                             <img src="images/pic_02.jpg" class="img-fluid">
    96.                             <div class="carousel-caption text-danger">
    97.                                 <h5>这是第2张图</h5>
    98.                                 <p>这是第2张图的说明这是第1张图的说明这是第2张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明</p>
    99.                             </div>
    100.                         </div>
    101.                         <div class="carousel-item">
    102.                             <img src="images/pic_03.jpg" class="img-fluid">
    103.                             <div class="carousel-caption text-danger">
    104.                                 <h5>这是第3张图</h5>
    105.                                 <p>这是第3张图的说明这是第3张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明</p>
    106.                             </div>
    107.                         </div>
    108.                     </div>
    110.                     <!-- 添加左右箭头 -->
    111.                     <a href="#captions" class="carousel-control-prev" data-slide="prev">
    112.                         <span class="carousel-control-prev-icon"></span>
    113.                     </a>
    114.                     <a href="#captions" class="carousel-control-next" data-slide="next">
    115.                         <span class="carousel-control-next-icon"></span>
    116.                     </a>
    118.                     <!-- 添加指示器 -->
    119.                     <ol class="carousel-indicators">
    120.                         <li data-target="#captions" data-slide-to="0" class="active"></li>
    121.                         <li data-target="#captions" data-slide-to="1"></li>
    122.                         <li data-target="#captions" data-slide-to="2"></li>
    123.                     </ol>
    124.                 </div>
    125.             </div>
    126.         </div>
    128.         <!-- 设置轮播图的选项 -->
    129.         <div class="row mt-5">
    130.             <div class="col">
    131.                 <div class="carousel slide" id="options" data-ride="carousel" data-interval='2000' data-keyboard='true'
    132.                     data-pause='false' data-wrap='true'>
    133.                     <div class="carousel-inner">
    134.                         <div class="carousel-item active">
    135.                             <img src="images/pic_01.jpg" class="img-fluid">
    136.                         </div>
    137.                         <div class="carousel-item">
    138.                             <img src="images/pic_02.jpg" class="img-fluid">
    139.                         </div>
    140.                         <div class="carousel-item">
    141.                             <img src="images/pic_03.jpg" class="img-fluid">
    142.                         </div>
    143.                     </div>
    145.                     <!-- 添加左右箭头 -->
    146.                     <a href="#options" class="carousel-control-prev" data-slide="prev">
    147.                         <span class="carousel-control-prev-icon"></span>
    148.                     </a>
    149.                     <a href="#options" class="carousel-control-next" data-slide="next">
    150.                         <span class="carousel-control-next-icon"></span>
    151.                     </a>
    153.                     <!-- 添加指示器 -->
    154.                     <ol class="carousel-indicators">
    155.                         <li data-target="#options" data-slide-to="0" class="active"></li>
    156.                         <li data-target="#options" data-slide-to="1"></li>
    157.                         <li data-target="#options" data-slide-to="2"></li>
    158.                     </ol>
    159.                 </div>
    160.             </div>
    161.         </div>
    163.         <!-- 方法与事件 -->
    164.         <div class="row mt-5">
    165.             <div class="col">
    166.                 <div class="carousel slide" id="methods">
    167.                     <div class="carousel-inner">
    168.                         <div class="carousel-item active">
    169.                             <img src="images/pic_01.jpg" class="img-fluid">
    170.                         </div>
    171.                         <div class="carousel-item">
    172.                             <img src="images/pic_02.jpg" class="img-fluid">
    173.                         </div>
    174.                         <div class="carousel-item">
    175.                             <img src="images/pic_03.jpg" class="img-fluid">
    176.                         </div>
    177.                     </div>
    179.                     <!-- 添加左右箭头 -->
    180.                     <a href="javascript:;" class="carousel-control-prev prevBtn">
    181.                         <span class="carousel-control-prev-icon"></span>
    182.                     </a>写javascript时候就是让a标签不刷新  如果说不添加的话就会产生刷新；特别是添加了事件之后
    183.                     <a href="javascript:;" class="carousel-control-next nextBtn">
    184.                         <span class="carousel-control-next-icon"></span>
    185.                     </a>
    187.                     <!-- 添加指示器 -->
    188.                     <ol class="carousel-indicators indicatorsBtn">
    189.                         <li class="active"></li>
    190.                         <li></li>
    191.                         <li></li>
    192.                     </ol>
    193.                 </div>
    195.                 <button class="btn btn-primary play">开始</button>
    196.                 <button class="btn btn-primary pause">暂停</button>
    197.             </div>
    198.         </div>
    200.     </div>
    201.     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    202.         integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    203.         crossorigin="anonymous"></script>
    204.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    205.         integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    206.         crossorigin="anonymous"></script>
    208.     <script>
    209.         //初始化以及开始播放
    210.         $('.play').click(function () {
    211.             $('#methods').carousel({
    212.                 interval: 2000
    213.             });
    215.             $('#methods').carousel('cycle');
    216.         });
    218.         //暂停播放
    219.         $('.pause').click(function () {
    220.             $('#methods').carousel('pause');
    221.         });
    223.         //上一张功能
    224.         $('.prevBtn').click(function () {
    225.             $('#methods').carousel('prev');
    226.         });
    228.         //下一张功能
    229.         $('.nextBtn').click(function () {
    230.             $('#methods').carousel('next');
    231.         });
    233.         //指示器点击的功能
    234.         $('.indicatorsBtn li').each(function (index, element) {
    235.             $(element).click(function () {
    236.                 $('#methods').carousel(index)
    237.             });
    238.         });
    240.         //两个事件
    241.         $('#methods').on('slide.bs.carousel', function (ev) {    //开始切换的事件
    242.             console.log(
    243.                 ev.direction,    //当前走的方向
    244.                 ev.relatedTarget,    //当前走的哪一个图片（DOM元素）
    245.                 ev.from,    //当前走的图片的索引
    246.                 ev.to,        //要走到的图片的索引
    247.             );    
    248.             console.log('开始走');
    249.         });
    250.         $('#methods').on('slid.bs.carousel', function () {    //结束切换的事件
    251.             // do something…
    252.             console.log('走完了');
    253.         });
    254.     </script>