javascript - 如何使用 Jquery 每 2 秒更改一次图像

Question

好吧，基本上我正在尝试创建自己的作品集网站，并且我希望这些图像“文本”每 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 = [
	"images/img1.jpg",
  "iamges/img2.jpg",
  "images/img3.jpg"
]
var current = 0;
setInterval(function(){
			
  $('#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="">