如何为此幻灯片添加播放/暂停按钮？答案

【问题标题】：How do i add a Play/Pause button for this slideshow?如何为此幻灯片添加播放/暂停按钮？
【发布时间】：2021-08-20 03:12:03
【问题描述】：

您好，我正在尝试制作一个自动运行的幻灯片，并且使用此代码它正在工作，但我需要向该代码添加一个播放/暂停按钮。有人愿意帮忙吗？我也需要 html/css

var indexDiaporama=1;
afficherDiapo(indexDiaporama);

function ajoutDiapo(n){
afficherDiapo(indexDiaporama+=n);
}

function diapoActuelle(n){
afficherDiapo(indexDiaporama=n);
}

function afficherDiapo(n){

var i;
var slides=document.getElementByClassName("diapo");
var dots=document.getElementByClassName("dot");

if(n>slides.length){indexDiaporama=1;}

if(n<1){indexDiaporama=slides.length;}

for(i=0; i<slides.length; i++){

slides[i].style.display="none";
}

for(i=0; i<dots.length; i++){

dots[i].className=dots[i].className.replace("active", "");
}

slides[indexDiaporama-1].style.display="block";

dots[indexDiaporama-1].className+="active";
}

var timer = setInterval(function(){
indexDiaporama++;
afficherDiapo(indexDiaporama);
},3000);

【问题讨论】：

您是否偶然使用 CSS 动画来运行此幻灯片？
如果您使用 setInterval，请查看此帖子：stackoverflow.com/a/21278007/1533592
没有我没有使用 CSS 动画
你需要一些机制来停止setInterval。您可以在此处阅读有关 clearInterval 的更多信息：w3schools.com/jsref/met_win_clearinterval.asp。这里还有一个描述另一种解决方案的 SO 答案：stackoverflow.com/a/24725066

标签： javascript slideshow slide

【解决方案1】：

首先设置一个变量，我们将其称为pause，将其命名为false，然后在setTimeout() 中运行一个条件来检查它是否为假 => if(!paused){ //run code }.

处理 paused 变量，因为您的按钮在按下时处于什么状态 ==> e.target

您创建了一个函数，该函数在单击pause/play 按钮时传入您的事件目标。在该功能中，您检查pause/play 按钮的值，您可以使用dataset 在单击和更改时切换0 或1 / on 或off / true 或false您的pause 变量的值是由于dataset 在点击时设置的值。

在我的示例中，我在 JS 中的 data-id 属性 => dataset.id 中使用 0 和 1，并带有一个检查该值的条件 => @987654338 @。在条件中，我还设置了按钮的 textContent 和 dataset.id 值。

然后，每次按下暂停按钮时，setInteral 都会冻结，因为它正在寻找 paused 以不设置为 false => if (!paused){ // run code for setInterval }。

下面是一个简单的 JS setInterval，它每毫秒增加一个数字。我们可以使用上面描述的函数和事件监听器来暂停和播放它。

const display = document.getElementById('display')
const btn = document.querySelector('.btn')

let paused = false;
let i = 1;

function checkBool(e) {
  if (e.target.dataset.id === '0') {
    e.target.dataset.id = '1'
    btn.textContent = 'Play'
    paused = true;
  }else{
    e.target.dataset.id = '0'
    btn.textContent = 'Pause'
    paused = false;
  }
}

btn.addEventListener('click', checkBool)

const timer = setInterval(function() {
  if (!paused) { //<-- paused is not false
    //<-- run the code your interval handles
    display.textContent = i;
    i++;
  }
}, 100);

<div id="display"></div>
<button class="btn" data-id="0">Pause</button>

【讨论】：