使用 Javascript function 播放和暫停的引導輪播

Question

我在引導程序中的輪播 class 有問題。 我已經定義了一個默認為暫停按鈕的按鈕，然后我在該按鈕上使用 javascript function 來控制輪播，就像單擊時一樣，圖標應該變為播放並且輪播應該停止循環，但是.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

好問題。 我也無法讓{ pause:null }按您的意願工作。 但是更多地挖掘這個，我得到了一個可行的解決方案......

• 關鍵是在carousel div 上切換data-interval屬性
• 但這並沒有啟動循環，觸發啟動......我們要么必須手動懸停和懸停......或者自動化它（我們做了）
• 但由於 jQuery 添加/刪除此屬性存在一些滯后，我們（hackish-ly）添加了一個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 2

我相信您留下了具有相同 ID 的未注釋 div：

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

那么具有相同 id 的按鈕將不起作用：

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

我有同樣的問題。 代碼來自Coursera，前端Web UI Frameworks and Tools：Bootstrap 4 Week 4，Exercise（Instructions）：More Bootstrap和JQuery

Answer 3

下面的答案效果很好，並且在 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 4

如果這是來自 coursera 的引導課程第 4 課，我遇到了同樣的問題。

Go 到這部分，並在我的情況下更改 ID，我將 carousel-style 作為 id。 然后將 go 更改為樣式表並將#carouselButton 更改為您在 btn-group 中命名的 id。

它應該在那之后工作。

PS老師沒有給你解釋但是你需要將播放圖標更改為“fas fa play”為class

它應該看起來像這樣。

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>