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

Here is a PEN示例。

但是，如果您没有使用任何内容来识别它们，它如何保存滑块位置？

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

暂停动作的简单滑块|的setInterval

2 个答案: