Javascript 重置图像上的间隔

我有一个简单的图像滑块，我从互联网上下载。我对JQuery了解不多，只是从阅读代码中了解到的内容。该代码有一个图像滑块，每8秒前进一次，有两个按钮，单击后可以向前或向后推进图像。我的问题是，当我单击按钮前进时，8秒计时器不会重置，因此如果我在间隔时间内单击6秒，图像将在2秒后转到第三个图像。附件是我的

JQuery

代码。我尝试将

setInterval

添加到

moveLeft（）

和

moveRight（）

函数中，但没有正常工作。很抱歉，我缺乏

JQuery

知识，我在学校学过基本的

JavaScript

，从那以后就很少使用了。附件是我目前拥有的代码

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

    });
});

---

出现此问题的原因是，无论何时创建右移的新间隔，以前的间隔仍然存在。我建议您通过使用专用功能取消并重新初始化，确保只有一个间隔：

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

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

然后，只需单击调用此函数：

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

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

---

您需要清除并重置间隔