Comment réinitialiser une fonction automatique d'un diaporama lorsque vous appuyez sur le bouton suivant/précédent?

Question

J'ai un diaporama d'images, qu'il change automatiquement (autoslide()) toutes les 4 sec, donc quand j'appuie sur l'un des boutons suivant/précédent, le compte à rebours continue. Comment je veux me comporter: Quand l'un des boutons suivant/précédent est pressé, le compte à rebours de la fonction autoslide recommence depuis 0 secondes, sans continuer le compte à rebours précédent.

var index = 1; 
 

 
function plusindex(n) { 
 
    showimage(index += n); 
 
} 
 

 
showimage(index); 
 

 
function showimage(n) { 
 
    var slide = document.getElementsByClassName('sliders'); 
 

 
    if (n > slide.length) { 
 
    index = 1 
 
    }; 
 
    if (n < 1) { 
 
    index = slide.length 
 
    }; 
 
    for (i = 0; i < slide.length; i++) { 
 
    slide[i].style.display = "none"; 
 
    } 
 
    slide[index - 1].style.display = "block"; 
 

 
} 
 

 
var time = 4000; 
 
autoslide() 
 

 
function autoslide() { 
 
    var slide = document.getElementsByClassName('sliders'); 
 
    for (i = 0; i < slide.length; i++) { 
 
    slide[i].style.display = "none"; 
 
    } 
 
    if (index > slide.length) { 
 
    index = 1 
 
    }; 
 
    slide[index - 1].style.display = "block"; 
 
    index++; 
 
    setTimeout(autoslide, time); 
 
}

<button class="btn" id="btn1" onclick="plusindex(-1)">&#10094</button> 
 
<button class="btn" id="btn2" onclick="plusindex(1)">&#10095</button>

Answer 1

Vous pouvez le faire en utilisant clearTimeout. Vous fonctionnez autoslide doit être modifié comme suit:

var timer; 
function autoslide() { 
    var slide = document.getElementsByClassName('sliders'); 
    for (i = 0; i < slide.length; i++) { 
    slide[i].style.display = "none"; 
    } 
    if (index > slide.length) { 
    index = 1 
    }; 
    slide[index - 1].style.display = "block"; 
    index++; 
    timer = setTimeout(autoslide, time); 
} 

Ici, le timer garde la trace de votre prochaine prévue glisser. Donc, voici comment vous pouvez l'utiliser pour réinitialiser le minuteur:

function plusindex(n){ 
    showimage(index +=n); 
    clearTimeout(timer); 
    timer = setTimeout(autoslide,time); 
}