單擊幻燈片上的下一個或上一個按鈕時創建新間隔

Question

我制作了一個間隔為 8 秒的自動幻燈片，然后我添加了一個可以工作的上一個和一個下一個按鈕，但我現在的問題是間隔當然仍在運行。 取而代之的是，我想在每次單擊按鈕時設置新的間隔。 有人可以幫我嗎？ 提前謝謝你:) 祝你有美好的一天

javascript

const prev = document.querySelector('.slider .fa-chevron-circle-left');
const next = document.querySelector('.slider .fa-chevron-circle-right');

setInterval(function() {
    var active = document.querySelector('.show');
    active.classList.remove('show');
    if (active.nextElementSibling && active.nextElementSibling !== next && active.nextElementSibling !== prev) {
        active.nextElementSibling.classList.add('show');
    } else {
        active.parentElement.firstElementChild.classList.add('show');
    }    
}, 8000);
    
next.addEventListener('click', function() {
    var nextSlide;
    var active = document.querySelector('.show');
    active.classList.remove('show');
    nextSlide = active.nextElementSibling && active.nextElementSibling !== next && active.nextElementSibling !== prev ? active.nextElementSibling.classList.add('show') : active.parentElement.firstElementChild.classList.add('show');
})

prev.addEventListener('click', function() {
    var prevSlide;
    var active = document.querySelector('.show');
    active.classList.remove('show');
    prevSlide = active.previousElementSibling && active.previousElementSibling !== next && active.previousElementSibling !== prev ? active.previousElementSibling.classList.add('show') : active.parentElement.children[2].classList.add('show');
})

html

 <div class="slider">
    <div class="slide show"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <i class="fas fa-chevron-circle-left"></i>
    <i class="fas fa-chevron-circle-right"></i>
</div>

Answer 1

您應該存儲setInterval function 返回的間隔 ID，然后在事件處理程序中將其清除：

const intervalFunction = () => {
    var active = document.querySelector('.show');
    active.classList.remove('show');
    if (active.nextElementSibling && active.nextElementSibling !== next && active.nextElementSibling !== prev) {
      active.nextElementSibling.classList.add('show');
    } else {
      active.parentElement.firstElementChild.classList.add('show');
    }    
}

let intervalId = setInterval(intervalFunction, 8000);

next.addEventListener('click', function() {
    clearInterval(intervalId)
    intervalId = setInterval(intervalFunction, 8000);
    // ...
})

Answer 2

你可以試試這個，我只是清除間隔並在單擊下一個/上一個按鈕后重新啟動間隔。

function startSlider() {
    return setInterval(function() {
        var active = document.querySelector('.show');
        active.classList.remove('show');
        if (active.nextElementSibling && active.nextElementSibling !== next && active.nextElementSibling !== prev) {
            active.nextElementSibling.classList.add('show');
        } else {
            active.parentElement.firstElementChild.classList.add('show');
        }    
    }, 8000)
}

var slideInterval = startSlider();
    
next.addEventListener('click', function() {
    var nextSlide;
    var active = document.querySelector('.show');
    active.classList.remove('show');
    nextSlide = active.nextElementSibling && active.nextElementSibling !== next && active.nextElementSibling !== prev ? active.nextElementSibling.classList.add('show') : active.parentElement.firstElementChild.classList.add('show');
    clearInterval(slideInterval);
    slideInterval = startSlider();
})

prev.addEventListener('click', function() {
    var prevSlide;
    var active = document.querySelector('.show');
    active.classList.remove('show');
    prevSlide = active.previousElementSibling && active.previousElementSibling !== next && active.previousElementSibling !== prev ? active.previousElementSibling.classList.add('show') : active.parentElement.children[2].classList.add('show');
    clearInterval(slideInterval);
    slideInterval = startSlider();
})