悬停时的简单幻灯片，鼠标离开时幻灯片停止答案

【问题标题】：Simple Slideshow on Hover, Slideshow stops on mouseleave悬停时的简单幻灯片，鼠标离开时幻灯片停止
【发布时间】：2014-05-04 05:00:27
【问题描述】：

这是我的第一篇文章。我的代码适用于 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);

    });

  });


});

【问题讨论】：

标签： javascript jquery hover slideshow mouseenter

【解决方案1】：

更简单的实现方式是添加onmouseover = "mouseoverFunction();" onmouseout = "mouseoutFunction()" 到每个 img 标签然后在 javascript mouseoverFunction()

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

mouseoutFunction() 停止循环

你不需要 a 标签

【讨论】：

【解决方案2】：

你希望鼠标悬停时你的图像开始滑动这是另一个我在 jquery 中不太擅长的代码，但这里是代码：

css

   #fadelinks{
   width: 100px;
   height: 100px;
   overflow: hidden;
}

设置你的图片高度和宽度等于fadelinks的宽度和高度

HTML

    <div class="fadelinks">

       <a id="same1" href="#"> <img src=""/> </a>
       <a id="same2" href="#"> <img src=""/> </a>
       <a id="same3" href="#"> <img src=""/> </a>
       <a id="same4" href="#"> <img src=""/> </a>

    </div>
<button onclick="slid1">image1<button>
<button onclick="slid2">image2<button>
<button onclick="slid3">image3<button>
<button onclick="slid4">image4<button>

jquery

 var slide1 = function(){

    $(document).ready(function(){
      $("#same1, #same2, #same3, #sam4").fadeout(100);$("#same1").fadeIn();
    });
}
  var slide2 = function(){

    $(document).ready(function(){
      $("#same1, #same2, #same3, #sam4").fadeout(100);$("#same2").fadeIn();
    });
} var slide3 = function(){

    $(document).ready(function(){
      $("#same1, #same2, #same3, #sam4").fadeout(100);$("#same3").fadeIn();
    });
} var slide4 = function(){

    $(document).ready(function(){
      $("#same1, #same2, #same3, #sam4").fadeout(100);$("#same4").fadeIn();
    });

你会明白这会做什么，但正如我告诉你的，我在 jquery 中不是那么好，所以我在你知道的菜鸟风格中做到了这一点。但从这里你可能会明白，你可以将它与事件处理程序 mousehover 和 mouseout 集成，还可以使用 setinterval 自动滑动。

谢谢。

【讨论】：