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语句来说，这似乎不是最好用的。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: