2016-01-31 35 views
1

好每2秒,所以基本上我试图创建自己的投资组合的网站,我希望这些图像“文本”要改变每2其次...我如何改变图像使用jQuery

如何我可以使用我的下面的代码吗?

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#"/> 
+1

看看有关setInterval()方法 – smdsgn

回答

2

正如@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="">

+0

抱歉,这段代码是什么意思? {current =(current Vexasoe

+0

@Vexasoe它被称为[三运营商](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)。这是编写if/else语句的快速方法。看看这个链接。 – magreenberg

+0

我现在了解更多!谢谢 :) – Vexasoe