javascript - js悬挂式应用程序中的图像幻灯片

我已经用JavaScript编写了此方法：

function displayImage() {

   window.setInterval(function(){
       for (var i = 1; i <= 4; i++) {
           document.getElementById("img1").setAttribute("src",
                   "images/th-" + i + ".jpg");
           if(i==4){
               i=0;
           }
       }
   }, 3000);
}

并从html页面调用此方法：。但是3秒钟后，我的应用程序挂起，没有任何反应。这是怎么了？

最佳答案

在这种情况下，您的for循环每隔3000毫秒将工作4次。您需要在每3000毫秒后更改一张图片。

尝试这个

function displayImage() {

   var img = document.getElementById("img1");
   var imgIndex = 1;

   window.setInterval(function(){
       img.setAttribute("src", "images/th-" + imgIndex + ".jpg");
       imgIndex = imgIndex === 3 ? 0 : imgIndex + 1;
   }, 3000);
}