Question

Jquery：

var picname = ["1.jpg"];
      var pics = 0;

      $("#pic").mouseenter(function() {

        $("#pic").fadeOut(300, function() { 
          $("#pic").attr("src", picname[pics]); 
          pics++;    
          if (pics > 2) {pics = 0;} 
          $("#pic").fadeIn(500); 
        });

      }); 



$("#pic").mouseleave(function() {

        $("#pic").fadeOut(300, function() { 
          $("#pic").attr("src", picname[pics]); 
          pics++;    
          if (pics > 2) {pics = 0;} 
          $("#pic").fadeIn(500); 
        });

  });

HTML：

 <img id= 'pic' src="1.jpg"/>

当我将鼠标放在那张照片上时，我想重复一遍，当我离开鼠标时，它会变得正常，这会重复。

Answer 1

如果你想让它在2张图片之间循环，你就不需要带有图片名称的数组。就这样做：

$("#pic").mouseenter(function() {
  $("#pic").fadeOut(300, function() {
    $("#pic").attr("src", "http://images.all-free-download.com/images/graphiclarge/banana_clip_art_13734.jpg");
    $("#pic").fadeIn(500);
  });
});
$("#pic").mouseleave(function() {
  $("#pic").fadeOut(300, function() {
    $("#pic").attr("src", "http://images.all-free-download.com/images/graphiclarge/banana_clip_art_13529.jpg");
    $("#pic").fadeIn(500);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id='pic' src="http://images.all-free-download.com/images/graphiclarge/banana_clip_art_13529.jpg" />

我怎么能重复这个？

1 个答案: