javascript - 暂停一个简单的滑块动作 | 设置间隔

Question

有人可以帮我在下面的幻灯片中添加暂停和继续悬停吗？

setInterval(function() { 
  $('#slideshow >img:first')
  .hide()
  .next()
  .show()
  .end()
  .appendTo('#slideshow');
},  2000);

如果它有帮助，我也有一个有效的 codepen 链接。您将看到另一个图像，我使用相同的 setInterval 函数来更改图像 ID。理想情况下，此暂停函数将停止两个 setInterval 循环。但如果我能在这个例子中得到一些帮助，我也许可以改造其余的。

http://codepen.io/banunn/pen/EKfuj

谢谢！

Answer 1

将 setInterval 返回的 id 存储到一个变量中，以便在悬停时调用 clearInterval。例如，

function startInterval(){
   return setInterval(function() { 
      $('#slideshow >img:first')
      .hide()
      .next()
      .show()
      .end()
      .appendTo('#slideshow');
      },  2000);
    }
    var int= startInterval();

    $('#slideshow').hover(function(){
        clearInterval(int);
    },function(){
        int = startInterval();
    });

Answer 2

您可以创建两个函数来启动和“停止”滑块，当它停止时，您可以保存滑块位置以从该点重新启动，如下所示：

var interval, position;

function runSlide(position) {
    interval = setInterval(function () {
        $('#slideshow >img:first').eq(position)
            .hide()
            .next()
            .show()
            .end()
            .appendTo('#slideshow');
        position = $('#slideshow > img:visible').index();
    }, 2000);
}

function stopSlide(){
    clearInterval(interval);
}

这是一个带有示例的 PEN 。

但是，如果您不使用任何东西来识别它们，它如何保存滑块位置呢？

简单，年轻的学徒，它只是img从幻灯片中获取，:visible并假设这img是再次启动滑块的正确点。