Question

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

    });

  });


});

Answer 1

更简单的实现方法是添加onmouseover =“mouseoverFunction（）;” onmouseout =“mouseoutFunction（）”到每个img标签然后在JavaScript中 mouseoverFunction（）

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

mouseoutFunction（）停止循环

你不需要a标签

Answer 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中不是那么好所以我已经在你知道的noob风格中做到了这一点。但是你可以从中得到这个想法，你可以用事件处理程序mousehover和mouseout对此进行注释，并使用setinterval自动滑动。

感谢。

悬停时的简单幻灯片，幻灯片在鼠标左键停止

2 个答案: