javascript - 如何让图像 slider 在单击后重置其自动滚动计时器？

Question

I have an image slider与 n图像数量。它每 5 秒自动在每个之间滚动一次。 slider 两侧各有一个“上一个”和“下一个”按钮。

$('#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;
}

我想要的功能是当用户单击“下一个”或“上一个”时，AutoScroll()计时器有效地“重置”回 0，然后再次启动。

我怎样才能做到这一点？我觉得我需要使用clearInterval()或类似的东西，但我不太熟悉这些功能。

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

Answer 1

这应该有效:

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