Question

我正在做一个带有按钮的简单滑块，它工作正常，但我想在当前代码中添加TimeOut()函数，以允许幻灯片自动更改。

我尝试使用jQuery来做到这一点，但是没有用。

$('.reviews-slider-button').click(function() {
    var i = $(this).index();
    $('.reviews-slider-person').hide();
    $('.reviews-slider-person-' + (i + 1)).show();
});

我想每10秒自动更改一次滑块，当我单击.reviews-slider-button时，它将重置计时器（为避免这种情况，我单击以更改幻灯片，计时器自动更改为下一个）。感谢您的建议。

Answer 1

您可以每10秒使用setInterval单击一次按钮：

var timer = ''; // Make global variable
function ScrollAuto() {
  temp = setInterval(function() {
    $('.nextButton').click();
  }, 10000)
  return timer;
}

要重置计时器，请在 reset 按钮内添加：

clearInterval(timer);

Answer 2

与Shree的答案类似，但要使其更整洁，但要使用超时（而不是间隔），除非您单击，否则您希望系统每10秒更改一次幻灯片，在这种情况下，请重置超时，然后转到下一张幻灯片，并设置下一个超时时间

类似这样的东西：

var slideMaxDuration = 10000; // in ms
var slideTimer = void 0;

function nextSlide() {
    clearInterval(slideTimer);
    // ... go to next slide ...
}

function autoContinue() {
    nextSlide();
    setTimeout(autoContinue, slideMaxDuration);
}

$('.reviews-slider-button').click(autoContinue);

当您希望整个过程开始时，您还需要设置初始autoContinue。

如何将TimeOut添加到当前的滑块代码？

2 个答案: