带有 Javascript 功能的引导轮播播放和暂停

Question

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

  $(文档).ready(函数(){

            $("#mycarousel").carousel( { 间隔：2000 } );

            $("#carouselButton").click(function()

            {

                if ($("#carouselButton").children("span").hasClass('fa-pause'))

                {

                    $("#mycarousel").carousel("暂停");

                    $("#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 }按照你的意愿上班。但是更多地挖掘这个，我得到了一个可行的解决方案......关键是在div上切换data-interval属性carousel但这并没有启动循环，触发启动......我们要么必须手动悬停和悬停......或者自动化它（我们做了）但是由于通过 jQuery 添加/删除这个属性有一些滞后，我们（hackish-ly）添加一个setTimeout来处理这个下面的工作片段：$(document).ready(function() {&nbsp; $('#playPause').click(function() {&nbsp; &nbsp; if ($("#myCarousel").attr("data-interval")) {&nbsp; &nbsp; &nbsp; $("#myCarousel").removeAttr("data-interval");&nbsp; &nbsp; &nbsp; $(".carousel-item>.active").removeAttr("active");&nbsp; &nbsp; &nbsp; setTimeout(function() {&nbsp; &nbsp; &nbsp; &nbsp; $(".carousel-control-next").trigger('click');&nbsp; &nbsp; &nbsp; &nbsp; $(".carousel-inner").trigger('mouseenter');&nbsp; &nbsp; &nbsp; &nbsp; $("#myCarousel").trigger('mouseenter');&nbsp; &nbsp; &nbsp; }, 500);&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; $("#myCarousel").attr("data-interval", "500");&nbsp; &nbsp; &nbsp; setTimeout(function() {&nbsp; &nbsp; &nbsp; &nbsp; $(".carousel-control-next").trigger('click');&nbsp; &nbsp; &nbsp; &nbsp; $(".carousel-inner").trigger('mouseenter');&nbsp; &nbsp; &nbsp; &nbsp; $("#myCarousel").trigger('mouseenter');&nbsp; &nbsp; &nbsp; &nbsp; $("#myCarousel").trigger('mouseleave');&nbsp; &nbsp; &nbsp; }, 1000);&nbsp; &nbsp; }&nbsp; });&nbsp; // Enable Carousel Indicators&nbsp; $(".item1").click(function() {&nbsp; &nbsp; $("#myCarousel").carousel(0);&nbsp; });&nbsp; $(".item2").click(function() {&nbsp; &nbsp; $("#myCarousel").carousel(1);&nbsp; });&nbsp; $(".item3").click(function() {&nbsp; &nbsp; $("#myCarousel").carousel(2);&nbsp; });&nbsp; // Enable Carousel Controls&nbsp; $(".carousel-control-prev").click(function() {&nbsp; &nbsp; $("#myCarousel").carousel("prev");&nbsp; });&nbsp; $(".carousel-control-next").click(function() {&nbsp; &nbsp; $("#myCarousel").carousel("next");&nbsp; });});/* Make the image fully responsive */.carousel-inner img {&nbsp; width: 100%;&nbsp; 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">&nbsp; <button type='button' id='playPause'>Play / Pause</button>&nbsp; <!-- The carousel -->&nbsp; <div id="myCarousel" class="carousel slide mt-4">&nbsp; &nbsp; <!-- Indicators -->&nbsp; &nbsp; <ul class="carousel-indicators">&nbsp; &nbsp; &nbsp; <li class="item1 active"></li>&nbsp; &nbsp; &nbsp; <li class="item2"></li>&nbsp; &nbsp; &nbsp; <li class="item3"></li>&nbsp; &nbsp; </ul>&nbsp; &nbsp; <!-- The slideshow -->&nbsp; &nbsp; <div class="carousel-inner">&nbsp; &nbsp; &nbsp; <div class="carousel-item active">&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500">&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="carousel-item">&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500">&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="carousel-item">&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500">&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <!-- Left and right controls -->&nbsp; &nbsp; <a class="carousel-control-prev" href="#myCarousel">&nbsp; &nbsp; &nbsp; <span class="carousel-control-prev-icon"></span>&nbsp; &nbsp; </a>&nbsp; &nbsp; <a class="carousel-control-next" href="#myCarousel">&nbsp; &nbsp; &nbsp; <span class="carousel-control-next-icon"></span>&nbsp; &nbsp; </a>&nbsp; </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 框架和工具：Bootstrap 4 Week 4，练习（说明）：更多 Bootstrap 和 JQuery

Answer 3

下面的答案效果很好，并且在 JavaScript 中具有不同的口味function buttonFlip() {&nbsp; &nbsp;&nbsp; var parentButton = document.getElementById("carouselButton");&nbsp; var childSpan = document.getElementById("carouselButton_span");&nbsp; if (parentButton.contains(childSpan) && childSpan.classList.contains("fa-pause")) {&nbsp; &nbsp; &nbsp; $("#mycarousel").carousel('pause');&nbsp; &nbsp; &nbsp; childSpan.classList.remove("fa-pause");&nbsp; &nbsp; &nbsp; childSpan.classList.add("fa-play");&nbsp; }&nbsp; else {&nbsp; &nbsp; &nbsp; $("#mycarousel").carousel('cycle');&nbsp; &nbsp; &nbsp; childSpan.classList.remove("fa-play");&nbsp; &nbsp; &nbsp; childSpan.classList.add("fa-pause");&nbsp; }}

Answer 4

如果这是来自 coursera 的引导课程第 4 课，我遇到了同样的问题。转到这部分并在我的情况下更改 ID，我将 carousel-style 作为 id。然后转到样式表并将#carouselButton 更改为您在btn-group 中命名的id。它应该在那之后工作。PS老师不给你解释还要你把播放图标改成“fas fa play”作为班级它应该看起来像这样。div class="btn-group" id="carousel-style">&nbsp; &nbsp;<button class="btn btn-light btn-sm" id="carouselButton">&nbsp; &nbsp; &nbsp; &nbsp; <span class="fa fa-pause"></span>&nbsp; &nbsp; </button>&nbsp;</div>Javascript 应如下所示：<script>$(document).ready(function() {&nbsp; &nbsp; $('#mycarousel').carousel({ interval: 2000 });&nbsp; &nbsp; $("#carouselButton").click(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($("#carouselButton").children("span").hasClass('fa fa-pause')) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#mycarousel").carousel('pause');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#carouselButton").children("span").removeClass('fa fa-pause');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#carouselButton").children("span").addClass('fas fa-play');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else if ($("#carouselButton").children("span").hasClass('fas fa-play')){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#mycarousel").carousel('cycle');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#carouselButton").children("span").removeClass('fas fa-play');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#carouselButton").children("span").addClass('fa fa-pause');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });}); </script>