Question

我在引导程序的轮播类中遇到问题。我定义了一个按钮，默认情况下是一个暂停按钮，然后我在该按钮上使用了javascript函数来控制轮播，就像在单击该按钮时一样，该图标应更改为播放并且该轮播应停止循环，但是.click（function）单击按钮时不起作用，而是当我将鼠标放在按钮上时正在暂停轮播。请帮我解决这个问题。


     $(document).ready(function(){
            $("#mycarousel").carousel( { interval: 2000 } );
            $("#carouselButton").click(function()
            {
                if ($("#carouselButton").children("span").hasClass('fa-pause'))
                {
                    $("#mycarousel").carousel("pause");
                    $("#carouselButton").children("span").removeClass('fa-pause');
                    $("#carouselButton").children("span").addClass('fa-play');
                }
                else if ($("#carouselButton").children("span").hasClass('fa-play'))
                {
                    $("#mycarousel").carousel("cycle");
                    $("#carouselButton").children("span").removeClass('fa-play');
                    $("#carouselButton").children("span").addClass('fa-pause');                    
                }
            });
        });

Answer 1

我相信你用相同的 id 留下了未注释的 div：

<div class="btn-group" id="carouselButton">

那么您的具有相同 ID 的按钮就不起作用了：

<button class="btn btn-danger btn-sm" id="carouselButton">

我遇到了同样的问题。代码来自 Coursera，前端 Web UI 框架和工具：Bootstrap 4 第 4 周，练习（说明）：更多 Bootstrap 和 JQuery

Answer 2

下面的答案效果很好，并且在 JavaScript 中提供了不同的口味

function buttonFlip() {   
  var parentButton = document.getElementById("carouselButton");
  var childSpan = document.getElementById("carouselButton_span");
  if (parentButton.contains(childSpan) && childSpan.classList.contains("fa-pause")) {
      $("#mycarousel").carousel('pause');
      childSpan.classList.remove("fa-pause");
      childSpan.classList.add("fa-play");
  }
  else {
      $("#mycarousel").carousel('cycle');
      childSpan.classList.remove("fa-play");
      childSpan.classList.add("fa-pause");
  }
}

Answer 3

好问题。我也无法像您想要的那样{ pause:null }工作。但是深入研究，我得到了一个可行的解决方案...

关键是在data-interval div上切换carousel属性
但这并没有使循环开始，要触发开始...我们要么手动进行悬停和悬停...要么使其自动化（我们做到了）
但是由于jQuery添加/删除此属性存在一些滞后，因此（hack琐地）添加setTimeout来解决此问题

正在使用摘要：

$(document).ready(function() {

  $('#playPause').click(function() {
    if ($("#myCarousel").attr("data-interval")) {
      $("#myCarousel").removeAttr("data-interval");
      $(".carousel-item>.active").removeAttr("active");
      setTimeout(function() {
        $(".carousel-control-next").trigger('click');
        $(".carousel-inner").trigger('mouseenter');
        $("#myCarousel").trigger('mouseenter');
      }, 500);
    } else {
      $("#myCarousel").attr("data-interval", "500");
      setTimeout(function() {
        $(".carousel-control-next").trigger('click');
        $(".carousel-inner").trigger('mouseenter');
        $("#myCarousel").trigger('mouseenter');
        $("#myCarousel").trigger('mouseleave');
      }, 1000);
    }
  });

  // Enable Carousel Indicators
  $(".item1").click(function() {
    $("#myCarousel").carousel(0);
  });
  $(".item2").click(function() {
    $("#myCarousel").carousel(1);
  });
  $(".item3").click(function() {
    $("#myCarousel").carousel(2);
  });

  // Enable Carousel Controls
  $(".carousel-control-prev").click(function() {
    $("#myCarousel").carousel("prev");
  });
  $(".carousel-control-next").click(function() {
    $("#myCarousel").carousel("next");
  });
});

/* Make the image fully responsive */

.carousel-inner img {
  width: 100%;
  height: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container mt-3">
  <button type='button' id='playPause'>Play / Pause</button>

  <!-- The carousel -->
  <div id="myCarousel" class="carousel slide mt-4">

    <!-- Indicators -->
    <ul class="carousel-indicators">
      <li class="item1 active"></li>
      <li class="item2"></li>
      <li class="item3"></li>
    </ul>

    <!-- The slideshow -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500">
      </div>
      <div class="carousel-item">
        <img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500">
      </div>
      <div class="carousel-item">
        <img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="carousel-control-prev" href="#myCarousel">
      <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#myCarousel">
      <span class="carousel-control-next-icon"></span>
    </a>
  </div>
</div>

Answer 4

如果这是来自 coursera 的引导课程第 4 课，我遇到了同样的问题。

转到这部分并更改 ID，在我的情况下，我将轮播样式作为 id。然后转到样式表并将 #carouselButton 更改为您在 btn-group 中命名的 id。

它应该在那之后工作。

P.S 老师不给你解释但你需要把播放图标改为“fas fa play”作为班级

它应该是这样的。

div class="btn-group" id="carousel-style">
   <button class="btn btn-light btn-sm" id="carouselButton">
        <span class="fa fa-pause"></span>
    </button>
 </div>

Javascript 应该是这样的：

<script>
$(document).ready(function() {
    $('#mycarousel').carousel({ interval: 2000 });
    $("#carouselButton").click(function(){
            if ($("#carouselButton").children("span").hasClass('fa fa-pause')) {
                $("#mycarousel").carousel('pause');
                $("#carouselButton").children("span").removeClass('fa fa-pause');
                $("#carouselButton").children("span").addClass('fas fa-play');
            }
            else if ($("#carouselButton").children("span").hasClass('fas fa-play')){
                $("#mycarousel").carousel('cycle');
                $("#carouselButton").children("span").removeClass('fas fa-play');
                $("#carouselButton").children("span").addClass('fa fa-pause');                    
            }
        });
}); </script>

具有Javascript功能的自举轮播，可以播放和暂停

4 个答案: