javascript - 暂停一个简单的 slider 操作 |设置时间间隔

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