Question

I have an image slider，图片数量为n。它每5秒钟在每一个之间自动滚动。有一个＆＃34;之前＆＃34;和＆＃34; next＆＃34;滑块两侧的按钮。

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

我希望的功能是当用户点击＆＃34; next＆＃34;或者＆＃34;之前的＃34;，AutoScroll()计时器有效地＆＃34;重置＆＃34;回到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）

然后再次设置间隔。

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

3 个答案: