Question

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

我在想这可能与以下事实有关：我有两个单独的功能：一个用于播放/暂停按钮图标切换，另一个用于实际的播放暂停行为？ （更新：此问题现已修复，但仍然无法正常工作）

对不起，我在用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：

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

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

Answer 1

您的代码中缺少一些细节，这些细节将有所帮助，但是我想您可以摆脱onclick处理程序，并附加两个事件侦听器：

let slideId;

// FUNCTION TO START SLIDESHOW
const startSlide = () => {
    let interval = 2000; // using just as sample
    playing = true;
    return setInterval(() => {
        console.log('moveToNextSlide();') // replaced just to test without missing code
    }, interval);
};

//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
playPause.addEventListener('click', function toggle() { // the arrow function would not work in this case
    var button = this;
    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;
});

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

1 个答案: