图像幻灯片在js挂app

Question

我在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秒后，我的应用程序挂起，没有任何反应。这有什么问题？

Answer 1

在这种情况下，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);
}