如何让我的图像滑块在单击后重置其自动滚动计时器？

Question

I have an image slider 图片数量 n。它每 5 秒在每一个之间自动滚动一次。滑块两侧各有一个 "previous" 和 "next" 按钮。

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

我想要的功能是 当用户点击 "next" 或 "previous" 时，AutoScroll() 定时器有效地 "resets" 回到 0 然后开始又起来了。

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

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

Answer 1

您正在尝试清除函数而不是变量尝试如下： var myVar = setInterval(autoplay(), 5000); 然后 clearInterval(myVar)

然后重新设置间隔。

Answer 2

您需要清除每次点击按钮的时间间隔

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

这应该有效：

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

如何让我的图像滑块在单击后重置其自动滚动计时器？

How do I get my image slider to reset its auto-scroll timer after a click?

javascript

jquery

settimeout

setinterval