单击幻灯片上的下一个或上一个按钮时创建新间隔

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 函数返回的间隔 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

你可以试试这个，我只是在点击next/prev按钮后清除间隔并重新开始间隔。

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();
})

单击幻灯片上的下一个或上一个按钮时创建新间隔

make new interval when clicking on next or previous button on a slide

javascript

loops

slider

setinterval

carousel