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

Posted 2023-03-21

【中文标题】如何为此幻灯片添加播放/暂停按钮？

【英文标题】：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，请查看此帖子：***.com/a/21278007/1533592

没有我没有使用 CSS 动画

你需要一些机制来停止setInterval。您可以在此处阅读有关 clearInterval 的更多信息：w3schools.com/jsref/met_win_clearinterval.asp。这里还有一个描述另一种解决方案的 SO 答案：***.com/a/24725066

【参考方案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>