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

Question

I have written this method in 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);     
}

and am calling this method from html page: . But after 3 sec, my application hangs and nothing happens. What is going wrong in this?

Answer 1

In this case your for loop will work 4 times after every 3000 milliseconds. You need to change one picture after each 3000 milliseconds.

Try this

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);
}