引导轮播启动/停止功能

Question

我在引导程序轮播中添加了一个播放/暂停按钮，但它似乎不起作用。我实现了我认为适合播放/暂停按钮的 JavaScript。我希望播放/暂停按钮能够正常启动和停止轮播动画。这是我使用的 html 和 Javascript：

<div class="row">
<div class="col-xs-1 col-sm-1 col-lg-1 col-xl-1">
</div>
<div class="col-xs-1 col-sm-1 col-lg-1 col-xl-1">
<button class="carousel-control-prev" type="button" 
data-bs-target="#carouselExampleFade" data-bs- 
slide="prev">
<span class="carousel-control-prev-icon" aria- 
hidden="true">Prev</span>
<span class="visually-hidden">Previous</span>
</button>
</div>
<div class="col-xs-8 col-sm-8 col-lg-8 col-xl-8">
<div class="container">
<button type="button" 
id="playPause">Play/Pause</button>
<div id="carouselExampleFade" class="carousel slide 
carousel-fade mx-auto my-auto" data- 
interval="false">

<div class="carousel-inner">
<div class="carousel-item active">
<div class="d-flex justify-content-center">
<div class="title-text">
<h1 aria-describedby="desctext">Who We Are &#x25BD; 
</h1>
            
<div id="desctext"> Some text

</div>
</div>
</div>
</div>

<div class="carousel-item">
<div class="d-flex justify-content-center">
<div class="title-text2">
<h1 aria-describedby="desctext2">Our Mission 
&#x25BD; </h1>
                
<div id="desctext2">Some text
</div>
</div>
</div>
</div>

</div>
</div>
</div>
</div>
<div class="col-xs-1 col-sm-1 col-lg-1 col-xl-1">

<button class="carousel-control-next" type="button" 
data-bs-target="#carouselExampleFade" data-bs- 
slide="next">
<span class="carousel-control-next-icon" aria- 
hidden="true">Next</span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="col-xs-1 col-sm-1 col-lg-1 col-xl-1">
</div>

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

$(".carousel-control-prev").click(function() {
                                
$("#carouselExampleFade").carousel("prev");
});
$(".carousel-control-next").click(function() {
                                
$("$#carouselExampleFade").carousel("next");
});
});
</script>

当我按“下一个”时，我现在拥有的代码会正常点击幻灯片，但之后如果我按“上一个”，动画会自动启动，并且当我按下播放/暂停按钮时，它不会冻结动画。动画继续从一张幻灯片播放到另一张幻灯片。有什么想法吗？

Answer 1

我想我看到了问题所在。在您的代码中，您使用 data-interval 属性来控制轮播动画。但是，此属性仅在轮播不处于鼠标交互模式时才有效。当用户点击轮播时，它进入鼠标交互模式，并且 data-interval 属性被忽略。这就是为什么即使在您按下播放/暂停按钮后，轮播动画也会继续从一张幻灯片转到另一张幻灯片。

$(document).ready(function() {
$("#playPause").click(function() {
if ($("#carouselExampleFade").is(":animated")) {
$("#carouselExampleFade").carousel("pause");
} else {
$("#carouselExampleFade").carousel("cycle");
}
});
$(".carousel-control-prev").click(function() {
$("#carouselExampleFade").carousel("prev");
});
$(".carousel-control-next").click(function() {
$("#carouselExampleFade").carousel("next");
});
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-1 col-sm-1 col-lg-1 col-xl-1">
</div>
<div class="col-xs-1 col-sm-1 col-lg-1 col-xl-1">
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
</div>
<div class="col-xs-8 col-sm-8 col-lg-8 col-xl-8">
<div class="container">
<button type="button" id="playPause">Play/Pause</button>
<div id="carouselExampleFade" class="carousel slide carousel-fade mx-auto my-auto" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="d-flex justify-content-center">
<div class="title-text">
<h1 aria-describedby="desctext">Who We Are &#x25BD; </h1>
<div id="desctext"> Some text
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="d-flex justify-content-center">
<div class="title-text2">
<h1 aria-describedby="desctext2">Our Mission &#x25BD; </h1>
<div id="desctext2">Some text
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-1 col-sm-1 col-lg-1 col-xl-1">
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="col-xs-1 col-sm-1 col-lg-1 col-xl-1">
</div>
</div>