Question

我正在学习在线课程，但是那里的一些代码对我来说并不起作用。

我想做的是：更改Bootstrap轮播的间隔并添加2个按钮（一个停止轮播，另一个使轮播滑动）。

我得到的行为是：

在Chrome 68.0中，只有将鼠标悬停在“停止”按钮上，该按钮才起作用。一旦我从按钮上移开鼠标，轮播就又开始移动，就像我按下“播放”按钮一样。
在Firefox 68.0中，脚本完全无效。按钮不起作用，并且轮播间隔没有更改。

这是html中包含轮播的部分：

    <div class="container">
    <div class="row row-content">
        <div class="col">
            <div id="mycarousel" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner" role="listbox">
                    <div class="carousel-item active">
                        <img class="d-block img-fluid" src="img/uthappizza.png" alt="uthappizza">
                        <div class="carousel-caption d-none d-md-block">
                            <h2>Uthappizza <span class="badge badge-danger">HOT</span> <span class="badge badge-pill badge-secondary">$4.99</span></h2>
                            <p class="d-none d-sm-block">A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img class="d-block img-fluid" src="img/buffet.png" alt="buffet">
                        <div class="carousel-caption d-none d-md-block">
                            <h2>Weekend Grand Buffet <span class="badge badge-danger">NEW</span></h2>
                            <p class="d-none d-sm-block">Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person </p>            
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img class="d-block img-fluid" src="img/alberto.png" alt="alberto">
                        <div class="carousel-caption d-none d-md-block">
                            <h2>Alberto Somayya</h2>
                            <h4>Executive Chef</h4>
                            <p class="d-none d-sm-block">Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. </p>                        
                        </div>
                    </div>
                    <ol class="carousel-indicators">
                        <li data-target="#mycarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#mycarousel" data-slide-to="1"></li>
                        <li data-target="#mycarousel" data-slide-to="2"></li>
                    </ol>
                    <a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </a>
                    <a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </a>
                    <div class="btn-group" id="carouselButton">
                        <button class="btn btn-danger btn-sm" id="carousel-pause">
                            <span class="fa fa-pause"></span>
                        </button>
                        <button class="btn btn-danger btn-sm" id="carousel-play">
                            <span class="fa fa-play"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

这是加载脚本的html文档的一部分：

<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function() {
        $("#mycarousel").carousel({ interval: 2000 });
        $("#carousel-pause").click(function() {
            $("$mycarousel").carousel('pause');
        });
        $("#carousel-play").click(function() {
            $("#mycarousel").carousel('cycle');
        });
    });
</script>

css的一部分，使“播放” /“停止”按钮向前移动（因此它们不会意外地隐藏在转盘下方）：

#carouselButton {
    right: 0px;
    position: absolute;
    bottom: 0px;
    z-index: 1500;
}

Answer 1

这可能对您有帮助

<div class="carousel-item active">
    <img src="assets/img/backgrounds/1.jpg" class="d-block w-100" alt="img1">
    <div class="carousel-caption">
        <h1>Carousel Template with Bootstrap 4</h1>
        <div class="description">
            <p> 
                Click on the buttons below to stop / start the autoplay:
            </p>
        </div>
        <div class="pause-cycle-buttons">
            <button type="button" class="btn btn-primary btn-customized btn-cycle disabled">
                <i class="fas fa-play"></i>
            </button>
            <button type="button" class="btn btn-primary btn-customized btn-pause">
                <i class="fas fa-pause"></i>
            </button>
        </div>
    </div>
</div>

/*
    Stop / Start carousel autoplay
*/

$('.btn-customized').on('click', function(){

    if( ! $(this).hasClass('disabled') ) {

        if( $(this).hasClass('btn-pause') ) {
            $('.carousel').carousel('pause');
        }
        else {
            $('.carousel').carousel('cycle');
        }

        $('.btn-pause, .btn-cycle').toggleClass('disabled');
        $(this).blur();

    }

});

快乐编码

Answer 2

$(document).ready(function() {
  $("#mycarousel").carousel({ interval: 10 });
  $("#carousel-pause").click(function() {
    $("#mycarousel").carousel('pause');
  });
  $("#carousel-play").click(function() {
    $("#mycarousel").carousel('cycle');
  });
});

#carouselButton {
    right: 0px;
    position: absolute;
    bottom: 0px;
    z-index: 1500;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <div class="row row-content">
      <div class="col">
        <div id="mycarousel" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
              <img class="d-block img-fluid" src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832_960_720.jpg" alt="uthappizza">
              <div class="carousel-caption d-none d-md-block">
                <h2>Uthappizza <span class="badge badge-danger">HOT</span> <span class="badge badge-pill badge-secondary">$4.99</span></h2>
                <p class="d-none d-sm-block">A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.</p>
              </div>
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832_960_720.jpg" alt="buffet">
              <div class="carousel-caption d-none d-md-block">
                <h2>Weekend Grand Buffet <span class="badge badge-danger">NEW</span></h2>
                <p class="d-none d-sm-block">Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person </p>            
              </div>
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832_960_720.jpg" alt="alberto">
              <div class="carousel-caption d-none d-md-block">
                <h2>Alberto Somayya</h2>
                <h4>Executive Chef</h4>
                <p class="d-none d-sm-block">Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. </p>                        
              </div>
            </div>
            <ol class="carousel-indicators">
              <li data-target="#mycarousel" data-slide-to="0" class="active"></li>
              <li data-target="#mycarousel" data-slide-to="1"></li>
              <li data-target="#mycarousel" data-slide-to="2"></li>
            </ol>
            <a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon"></span>
            </a>
            <a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next">
              <span class="carousel-control-next-icon"></span>
            </a>
            <div class="btn-group" id="carouselButton">
              <button class="btn btn-danger btn-sm" id="carousel-pause">
                <span class="fa fa-pause">Pause</span>
              </button>
              <button class="btn btn-danger btn-sm" id="carousel-play">
                <span class="fa fa-play">Play</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

请尝试不要使用jQuery的苗条版本，而应使用缩小版本，因为它会更好地工作。我在使用该版本时遇到了问题。

Bootstrap轮播的jQuery脚本不起作用

2 个答案: