Zurücksetzen des Intervalls auf ein Bild

Question

Ich habe einen einfachen Bildregler, den ich aus dem Internet bekommen habe. Ich kenne überhaupt nicht viel JQuery, nur was ich verstehe, wenn ich den Code lese, den ich habe. Der Code verfügt über einen Bildschieberegler, der alle 8 Sekunden vorrückt und über zwei Schaltflächen verfügt, die die Bilder beim Klicken vorwärts oder rückwärts bewegen. Mein Problem ist, dass wenn ich auf die Schaltfläche klicke, um fortzufahren, der 8-Sekunden-Timer nicht zurückgesetzt wird. Wenn ich 6 Sekunden in das Intervall klicke, geht das Bild 2 Sekunden später zum dritten Bild. Beigefügt ist mein JQuery Code. Ich habe versucht, setInterval zu den moveLeft() und moveRight() Funktionen hinzuzufügen, aber es hat nicht richtig funktioniert. Es tut mir leid für meinen Mangel an JQuery Wissen, ich lernte grundlegende JavaScript in der Schule und habe es nicht viel verwendet, wenn überhaupt seit. Beigefügt ist der Code, den ich derzeit habe.

jQuery(document).ready(function ($) { 


    setInterval(function() { 
     moveRight(); 
    }, 8000); 

    var slideCount = $('#slider ul li').length; 
    var slideWidth = $('#slider ul li').width(); 
    var slideHeight = $('#slider ul li').height(); 
    var sliderUlWidth = slideCount * slideWidth; 

    $('#slider').css({ width: slideWidth, height: slideHeight }); 

    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); 

    $('#slider ul li:last-child').prependTo('#slider ul'); 

    function moveLeft() { 
     $('#slider ul').animate({ 
      left: + slideWidth 
     }, 1000, function() { 
      $('#slider ul li:last-child').prependTo('#slider ul'); 
      $('#slider ul').css('left', ''); 
     }); 
    }; 

    function moveRight() { 
     $('#slider ul').animate({ 
      left: - slideWidth 
     }, 1000, function() { 
      $('#slider ul li:first-child').appendTo('#slider ul'); 
      $('#slider ul').css('left', ''); 
     }); 
    }; 

    $('a.control_prev').click(function() { 
     moveLeft(); 

     setInterval(function() { 
     moveRight(); 
    }, 8000); 

    }); 

    $('a.control_next').click(function() { 
     moveRight(); 

     setInterval(function() { 
     moveRight(); 
    }, 8000); 

    }); 
}); 

Answer 1

Sie mit diesem Problem, weil wenn Sie ein neues Intervall für die Bewegung rechts, Ihre vorherigen Intervalle erstellen existieren noch. Ich empfehle Ihnen, sicherzustellen, dass Sie nur ein Intervall haben durch eine spezielle Funktion zu löschen und neu initialisieren:

var slideInterval = setInterval(function() { 
    moveRight(); 
}, 8000); 

function resetInterval() { 
    clearInterval(slideInterval); 
    slideInterval = setInterval(function() { 
    moveRight(); 
    }, 8000); 
} 

Dann rufen Sie einfach diese Funktion auf Klick:

$('a.control_prev').click(function() { 
    moveLeft(); 
    resetInterval(); 
}); 

$('a.control_next').click(function() { 
    moveRight(); 
    resetInterval(); 
});