Comment faire pour que mon curseur d’image réinitialise son minuteur à défilement automatique après un clic?

J’ai un curseur d’image avec n quantité d’images. Il défile automatiquement entre chaque toutes les 5 secondes. Il y a un bouton “précédent” et “suivant” de chaque côté du curseur.

 $('#button-next').click(function () { //goes to next slide }); $('#button-prev').click(function () { //goes to previous slide }); var _scrollInterval = AutoScroll(); function AutoScroll() { var temp = setInterval(function () { $('#button-next').click(); }, 5000) return temp; }

La fonctionnalité que je souhaite est que lorsque l’utilisateur clique sur “suivant” ou “précédent”, le AutoScroll() “réinitialise” à zéro, puis redémarre.

Comment puis-je accomplir cela? Je sens que je dois utiliser clearInterval() ou quelque chose du clearInterval() , mais je ne connais pas trop ces fonctions.

Violon: https://jsfiddle.net/5u67eghv/4/

Cela devrait fonctionner:

 var temp; // <- add variable declaration $('#button-next').click(function () { nextImage = currentImage == lastImage ? firstImage : currentImage + 1; sliderImages.eq(currentImage).hide(500); sliderImages.eq(nextImage).show(500); currentImage = nextImage; clearInterval(temp); // <- clear interval AutoScroll(); // <- restart autoscroll }); $('#button-prev').click(function () { prevImage = currentImage == firstImage ? lastImage : currentImage - 1; sliderImages.eq(currentImage).hide(500); sliderImages.eq(prevImage).show(500); currentImage = prevImage; clearInterval(temp); // <- clear interval AutoScroll(); // <- restart autoscroll }); function AutoScroll() { temp = setInterval(function () { // <- temp variable already declared $('#button-next').click(); }, 5000) return temp; }

Vous devez effacer votre intervalle à chaque clic sur le bouton

 $('#button-next').click(function () { //goes to next slide clearInterval(_scrollInterval); //Do other functions _scrollInterval = AutoScroll(); //Reset Interval Timer }); $('#button-prev').click(function () { //goes to previous slide clearInterval(_scrollInterval); //Do other functions _scrollInterval = AutoScroll(); //Reset Interval Timer }); var _scrollInterval = AutoScroll(); function AutoScroll() { var temp = setInterval(function () { $('#button-next').click(); }, 5000) return temp; }

Ici, vous effacez et réinitialisez l’intervalle chaque fois que vous appuyez sur le bouton

Vous essayez d’effacer la fonction, pas une variable, comme suit: var myVar = setInterval (autoplay (), 5000); puis clearInterval (myVar)

puis réglez à nouveau l’intervalle.