javascript - 鼠标悬停时暂停简单的推子脚本

Question

当鼠标悬停在该脚本的 fadelinks div 上时，我想在悬停时暂停:

  $(function(){
  $('.fadelinks > :gt(0)').hide();
  setInterval(function(){$('.fadelinks > :first-child').fadeOut().next().fadeIn().end().appendTo
('.fadelinks');}, 5000);
});

html 的内容如下:

<div class="fadelinks">
    <div>...</div>
    <div>...</div>
</div>

我已经尝试了一些与 interval 相关的事情，试图在其中的悬停功能上添加暂停，但由于我极其有限的 jquery 知识，我尝试的所有内容都会破坏脚本，从而将其留下卡在最后一张幻灯片或第一张幻灯片上。只是希望这个简单的脚本在鼠标悬停时暂停并在鼠标退出时再次启动。

Here's a JSFiddle自然状态下的脚本。

Answer 1

尝试使用 .hover() ，声明变量来引用 setInterval ，使用函数调用 setInterval

$(function(){
  // define `_interval` variable
  var _interval;
  // cache `.fadelinks` element
  var elem = $(".fadelinks");
  elem.find("> :gt(0)").hide();
  elem.hover(function() {
    // "pause" at `hover` of `.fadelinks`
    clearInterval(_interval)    
  }, function() {
    // "reset"
    interval()   
  });
  var interval = function() {
  _interval = setInterval(function(){
                elem.find("> :first-child")
               .fadeOut().next().fadeIn().end()
               .appendTo(elem);
              }, 2000)
  };
  interval()

});

jsfiddle https://jsfiddle.net/ccmgdfog/4/