javascript - 如何让我的内容幻灯片在单击后重置其自动滚动计时器？

Question

我正在制作内容幻灯片 -
目前在http://harddrive.co.za/internet-solutions-provider/

这是 javascript

jQuery(document).ready(function($) {
  setInterval(function() {
    moveRight();
  }, 8000);
  var slideCount = $('#slider-isp ul li').length;
  var slideWidth = $('#slider-isp ul li').width();
  var slideHeight = $('#slider-isp ul li').height();
  var sliderUlWidth = slideCount * slideWidth;
  $('#slider-isp').css({
    width: slideWidth,
    height: slideHeight
  });

  $('#slider-isp ul').css({
    width: sliderUlWidth,
    marginLeft: -slideWidth
  });
  $('#slider-isp ul li:last-child').prependTo('#slider-isp ul');
  function moveLeft() {
    $('#slider-isp ul').animate({
      left: +slideWidth
    }, 1000, function() {
      $('#slider-isp ul li:last-child').prependTo('#slider-isp ul');
      $('#slider-isp ul').css('left', '');
    });
  };

  function moveRight() {
    $('#slider-isp ul').animate({
      left: -slideWidth
    }, 1000, function() {
      $('#slider-isp ul li:first-child').appendTo('#slider-isp ul');
      $('#slider-isp ul').css('left', '');
    });
  };

  $('a.control_prev').click(function() {
    moveLeft();
  });

  $('a.control_next').click(function() {
    moveRight();
  });
});

我查看了另一篇文章来寻找答案
How do I get my image slider to reset its auto-scroll timer after a click?

我想应用类似的东西
不破坏我的代码

请帮忙

Answer 1

由于我们这里没有可验证的示例，因此我建议执行以下步骤:

• 将 setInterval 保存到变量中。
• 在点击事件上，清除该间隔(以便它不再执行)。
• 在同一变量上再次设置间隔。

这将确保您点击后会经过相同的时间间隔。

但是，这需要稍微更改您的代码(未测试，因为我没有相应的 HTML):

jQuery(document).ready(function ($) {
    
    // save the timer
    var tick = setInterval(function () {
        moveRight();
        }, 8000);

        var slideCount = $('#slider-isp ul li').length;
        var slideWidth = $('#slider-isp ul li').width();
        var slideHeight = $('#slider-isp ul li').height();
        var sliderUlWidth = slideCount * slideWidth;

        $('#slider-isp').css({ width: slideWidth, height: slideHeight });

        $('#slider-isp ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

        $('#slider-isp ul li:last-child').prependTo('#slider-isp ul');

        function moveLeft() {
            $('#slider-isp ul').animate({
                left: + slideWidth
            }, 1000, function () {
                $('#slider-isp ul li:last-child').prependTo('#slider-isp ul');
                $('#slider-isp ul').css('left', '');
            });
        };

        function moveRight() {
            $('#slider-isp ul').animate({
                left: - slideWidth
            }, 1000, function () {
                $('#slider-isp ul li:first-child').appendTo('#slider-isp ul');
                $('#slider-isp ul').css('left', '');
            });
        };

        $('a.control_prev').click(function () {
            clearInterval(tick); // discard the timer
            moveLeft(); // do the intended stuff for click
            
            // set the timer again
            tick = setInterval(function () {
              moveRight();
              }, 8000);
        });

        $('a.control_next').click(function () {
            clearInterval(tick); // discard the timer
            moveRight(); // do the intended stuff for click
            
            // set the timer again
            tick = setInterval(function () {
              moveRight();
              }, 8000);
        });

    });