我如何改變圖像使用jQuery

Question

好每2秒，所以基本上我試圖創建自己的投資組合的網站，我希望這些圖像「文本」要改變每2其次...

如何我可以使用我的下面的代碼嗎？

jQuery的

 $("document").ready(function(){ 
      $("a").on("mouseover", function(event){ 
       event.preventDefault(); 

       var selection =$(this).html(); 
       var imgfolder ="images/"; 
       var new_image; 

       switch(selection){ 
        case "C#" : 
         new_image = image + "C#-Programmer.png"; 
         break; 
        case "Java" : 
         new_image = image + "JAVA-Programmer.png"; 
         break; 
        case "HTML" : 
         new_image = image + "HTML-Programmer.png"; 
         break; 
        case "DMD" : 
         new_image = image + "Digital-Media-Designer.png"; 
         break; 
        case "network" : 
         new_image = image + "Network-Engineer.png"; 
         break; 
        default: 
         new_image = + "UX-Designer.png"; 
         break; 
       } 
       $("img").attr("src", new_image); 
      }); 
      $("#hide").on("click",function(){ 
       $("img").fadeOut(1000,function(){ 
        alert("fadeout completed") 
       }); 
      }); 
      $("#show").on("click",function(){ 
       $("img").fadeIn(1000); 
      }); 


     }); 

這是我的html代碼

<img src="image/UX-Designer.png" alt="c#"/> 

Answer 1

正如@smdsgn說，使用setInterval創建基於定時器的事件。我還建議使用一組圖像位置並以這種方式遍歷它們。這看起來不像switch語句的最佳用法。

var images = [ 
 
\t "images/img1.jpg", 
 
    "iamges/img2.jpg", 
 
    "images/img3.jpg" 
 
] 
 
var current = 0; 
 
setInterval(function(){ 
 
\t \t \t 
 
    $('#flip').attr('src', images[current]); 
 
    current = (current < images.length - 1)? current + 1: 0; 
 

 
},1000); /*1000 = 1 sec*/

#flip{ 
 
    width: 100px; 
 
    height: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="flip" src="">