单击后如何使图像滑块重置其自动滚动计时器？

Question

我有一个带有n 个图像的图像滑块 。 每5秒自动滚动一次。 滑块的两侧都有一个“上一个”和“下一个”按钮。

$('#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()或类似的东西，但是我对这些函数不太熟悉。

小提琴： https : //jsfiddle.net/5u67eghv/4/

Answer 1

您需要在每次单击按钮时清除间隔

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

在此您可以在每次按下按钮时清除并重置间隔

Answer 2

这应该工作：

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

Answer 3

您正在尝试清除函数而不是变量，请尝试如下操作：var myVar = setInterval（autoplay（），5000）; 然后clearInterval（myVar）

然后再次设置间隔。