javascript - 悬停时简单幻灯片放映，鼠标离开时幻灯片放映停止

标签 javascript jquery hover slideshow mouseenter

这是我的第一篇文章。我的代码可以在 Chrome 和 Safari 中运行，但幻灯片不会在 Firefox 中停止。我想展示此代码的实时版本以使其更容易，但我在本地工作。我想知道是否是因为我用悬停而不是鼠标悬停和鼠标离开来编写它，但我不知道如何以这种方式正确写出它。这段代码甚至可能有错误，但浏览器没有检测到它。

HTML:

<div class="fadelinks">

   <a href="#"> <img src=""/> </a>
   <a href="#"> <img src=""/> </a>
   <a href="#"> <img src=""/> </a>
   <a href="#"> <img src=""/> </a>

</div>

jQuery:

jQuery(document).ready(function($) {

$(".fadelinks").each(function(){
    var $this = this;
    $($this).hover(function(){

      $('> :gt(0)', $this).hide();
      timer = setInterval(function(){$('> :first- child',$this).fadeOut()
      .next().fadeIn().end().appendTo($this);}, 1500);
      }, function() {
      clearInterval(timer);

    });

  });


});

最佳答案

更简单的实现方法是添加 onmouseover = "mouseoverFunction();"onmouseout = "mouseoutFunction()"到每个 img 标签然后在 JavaScript 中鼠标悬停函数()

循环遍历图像数组显示下一个等等

鼠标移出函数() 停止循环

您不需要 a 标签

关于javascript - 悬停时简单幻灯片放映，鼠标离开时幻灯片放映停止，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22650043/