Question

我正在尝试制作一个自动运行的轮播，但是如果用户与控件交互，我希望轮播重置其计时器。香港专业教育学院建立的东西在一定程度上是可行的，但是如果您与control-dot进行交互，则计时器不会重置，因此会引发一些有趣的结果...

这是我的JS

/* Js for carousel */
$('.steps__step-1').addClass('active');
$(function() {
  var lis = $('.step'),
    currentHighlight = 0;
  N = 5; // Duration in seconds
  setInterval(function() {
    currentHighlight = (currentHighlight + 1) % lis.length;
    lis.removeClass('active').eq(currentHighlight).addClass('active');
  }, N * 1000);
});

$('.control-dot').on('click', function(e) {
  e.preventDefault();
  $('.active').removeClass('active');
  var itemNo = $(this).index() - 1;
  $('.step').eq(itemNo).addClass('active');
});

http://jsfiddle.net/tnzLha3o/1/

Answer 1

您应该将时间间隔ID存储在变量（let intervalId = setInterval(...)）中，然后使用它重新启动。

这是您更新的小提琴：http://jsfiddle.net/gudzdanil/uzoydp6a/2/

这样您的代码将如下所示：

var duration = 5;
var lis = $('.step'),
    currentHighlight = 0;
var intervalId = null;
$(function() {
  $('.steps__step-1').addClass('active');
  runCarousel();
});

$('.control-dot').on('click', function(e) {
  e.preventDefault();
  $('.active').removeClass('active');
  var itemNo = $(this).index() - 1;
  $('.step').eq(itemNo).addClass('active');
  rerunCarousel();
});

function rerunCarousel() {
  if(intervalId) clearInterval(intervalId);
  intervalId = null;
  runCarousel();
}

function runCarousel() {
  intervalId = setInterval(function() {
    currentHighlight = (currentHighlight + 1) % lis.length;
    lis.removeClass('active').eq(currentHighlight).addClass('active');
  }, N * 1000)
}

Answer 2

添加变量以使其停止。

 var stop = false
    $('.steps__step-1').addClass('active');
    $(function() {
        var lis = $('.step'),
            currentHighlight = 0;
            N = 5; // Duration in seconds
        setInterval(function() {
            if (!stop) {
            currentHighlight = (currentHighlight + 1) % lis.length;
            lis.removeClass('active').eq(currentHighlight).addClass('active');
            }
        }, N * 1000);

    });

    $('.control-dot').on('click', function(e){
        e.preventDefault();
        $('.active').removeClass('active');
        var itemNo = $(this).index() - 1;
        $('.step').eq(itemNo).addClass('active');
        stop = !stop
    });

http://jsfiddle.net/quvgxz63/

如果用户进行互动，则暂停自主功能吗？

2 个答案: