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

How do I change image every 2 second using Jquery

本文关键字：图像一次 Jquery 何使用更新时间：2023-09-26

好的，所以基本上我正在尝试创建自己的投资组合网站，我希望这些图像"文本"每 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);
            });

        });

这是我的网页代码

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

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