我该如何重复这个？

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" />