在操作上暂停简单的滑块 |设置间隔

Pausing a simple slider on action | setInterval

本文关键字：设置 操作上 暂停 简单      更新时间：2023-09-26

有人可以帮我添加暂停并恢复悬停以下幻灯片吗？ 

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

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

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

谢谢！

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

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

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。

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

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

相关文章：