1

Eai comunidade, sou novo. Venho para pedir ajuda a pessoas mais experientes quanto ao seguinte problema: Quero fazer um banner de imagens em um site em que as imagens passam a cada 4 segundos, porém existem dois botões (um na extremidade esquerda e outro na direita) que, ao serem pressionados, PARAM o setInterval que criei e fazem com que seja necessário pressionar os botões para navegar entre as imagens. O problema é que não consegui programar o botão de retorno corretamente. Ele funciona no 1º clique e depois em diante retorna um erro. Deixarei o código a seguir, adianto que é um código meio extenso.

let time = 4000,
    currentImageIndex = 0,
    images = document.querySelectorAll("#slider img")
    max = images.length;

function nextImage() {

    images[currentImageIndex].classList.remove("selected")

    currentImageIndex++

    if(currentImageIndex >= max)
        currentImageIndex = 0

    images[currentImageIndex].classList.add("selected")
}

function returnImage(){

    images[currentImageIndex].classList.remove("selected")

    currentImageIndex--

    if(currentImageIndex <= 0)
        currentImageIndex = max

    images[currentImageIndex].classList.add("selected")
}

function button_next(){
    console.log("next")
    nextImage();
    stop();
    
}
function button_return(){
    console.log("return")
    returnImage();
    stop();
    
}

var rollInterval = setInterval(() => {
    nextImage()}, time)

function start() {
    rollInterval
}

function stop() {
    clearInterval(rollInterval)

}

window.addEventListener("load", start)

Me ajudando com essa parte já é mais que o suficiente e fico muito agradecido, entretanto se alguém puder responder ainda sobre se é possível eu dar algum tipo de reset no setInterval ao invés de PARÁ-LO, seria muito mais interessante para meu projeto. Sei que esta função não existe nativamente.

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .