Javascript 香草JS图像幻灯片播放/暂停按钮

我的播放/暂停按钮在我第一次按暂停和第一次按播放时起作用。但在那之后，如果我想再次暂停幻灯片，它只是以更快的速度播放幻灯片，我再也不能暂停它了

我想这可能是因为我有两个独立的功能：一个用于播放/暂停按钮图标切换，另一个用于实际播放暂停行为（更新：现在已修复，但仍不起作用）

对不起，我正在努力学习javascript，我还有很多东西要学

我的剧本：

const playPause = document.querySelector('.pause');
let slideId;

// FUNCTION TO MOVE TO NEXT SLIDE
const moveToNextSlide = () => {
    slides = getSlides();
    if (index >= slides.length - 1) return;
    index++;
    slideGroup.style.transform = `translateX(${-slideWidth * index}px)`;
    slideGroup.style.transition = '.8s';
}

// FUNCTION TO START SLIDESHOW
const startSlide = () => {
    slideId = setInterval(() => {
        moveToNextSlide();
    }, interval);
    playing = true;
};

// START AUTOMATIC SLIDESHOW UPON ENTERING THE PAGE
startSlide();

//PLAY PAUSE BUTTON - slideshow start/stop
playPause.addEventListener('click', () => {
    if(!slideId) {
        slideId = startSlide();
        console.log('started');
    } else {
        clearInterval(slideId);
        slideId = null;
        console.log('stopped');
    }
});

//PLAY PAUSE BUTTON - image change
function toggle(button) {
    if (button.className != 'pause') {
        button.src = 'img/pause.png';
        button.className = 'pause';
    }
    else if (button.className == 'pause') {
        button.src = 'img/play.png';
        button.className = 'play';
    }
    return false;
}

HTML:

这是我第二次尝试暂停幻灯片时控制台的外观：

---

您的代码中缺少一些细节，如果有这些细节可能会有所帮助，但我想您可以去掉

onclick

处理程序并附加两个事件侦听器：

let slideId；
//函数启动幻灯片放映
常数startSlide=（）=>{
设interval=2000；//仅用作示例
玩=真；
返回设置间隔（（）=>{
console.log（'moveToNextSlide（）；'）//被替换只是为了测试而不丢失代码
}，间隔）；
};
//播放暂停按钮-幻灯片放映开始/停止
playPause.addEventListener（'单击'，（）=>{
如果（！slided）{
slided=startSlide（）；
log（'started'）；
}否则{
清除间隔（slided）；
slided=null；
console.log（'stopped'）；
}
});
//播放暂停按钮-图像更改
playPause.addEventListener（'click'，function toggle（）{//arrow函数在这种情况下不起作用
var按钮=这个；
if（button.className！=“暂停”）{
button.src='img/pause.png'；
button.className='暂停'；
}
else if（button.className=='pause'）{
button.src='img/play.png'；
button.className='play'；
}
返回false；
});

谢谢，让他们都作为事件监听器更有意义。第一次播放后，幻灯片仍无法正确播放/暂停。我已经编辑了我的原始问题，添加了更多的代码，并添加了控制台的屏幕截图，以备使用。我更新了我的答案：您不会返回

slided

值。它有效，谢谢。但我还不完全理解为什么在阅读函数和return语句的工作原理之后仍然需要返回它。最初，幻灯片放映自动播放即使不返回slideId也能正常工作。这就是为什么现在必须返回它，因为slideId正在单独的函数（事件侦听器）中单独使用？对不起，我太离题了。

<input type='image' src='img/pause.png' class='pause' onclick='toggle(this);' />