单击后如何使图像滑块重置其自动滚动计时器? [英] How do I get my image slider to reset its auto-scroll timer after a click?

问题描述

我有一个图像滑块，其中图像数量为n.它每5秒自动在每一个之间滚动.滑块两侧都有一个上一个"和下一个"按钮.

I have an image slider with n amount of images. It scrolls automatically between each one every 5 seconds. There is a "previous" and "next" button on either side of the 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，然后再次启动.

My desired functionality is that when the user clicks "next" or "previous", the AutoScroll() timer effectively "resets" back to 0 and then starts up again.

我该怎么做?我觉得我需要使用clearInterval()或类似的方法，但是我对这些功能不太熟悉.

How can I accomplish this? I feel like I need to use clearInterval() or something along those lines but I am not too familiar with these functions.

提琴手: https://jsfiddle.net/5u67eghv/4/

推荐答案

这应该有效:

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

这篇关于单击后如何使图像滑块重置其自动滚动计时器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！