如何解决如何为此幻灯片添加播放/暂停按钮?
嗨,我正在尝试制作一个自动运行的幻灯片,并且使用此代码可以正常工作,但我需要向该代码添加一个播放/暂停按钮。有人愿意帮忙吗? 我还需要 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);
解决方法
首先设置一个变量,我们将调用它 pause
到 false 然后在您的 setTimeout()
中运行一个条件来检查是否它是 false => 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,并带有检查该值的条件=> if (e.target.dataset.id === '0'){ //set paused to true }else{ // set paused to false }
。在条件中,我还设置了按钮的 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。