Question

您好我正在尝试通过更改图像使用下面的代码使图像闪烁。我的＆＃34; setTimeout＆＃34;是否有问题？ TIA

var Test = new Array();
Test.length = 2;

for (var i = 0; i < Test.length; i++) { 
    Test[i] = new Image();
    Test[i].src = "images/Image2" + (i+1) + ".png";
}

function ChangeImage() {
    for (var i = 0; i < Test.length; i++) {
        document.getElementById('Test_Image').src = Test[i].src; 
    }
    setTimeout("ChangeImage()", 1000);           
 }   

 ChangeImage();

Answer 1

首先......你使用新的Image（）部分让自己感到困惑。你可以使用Test [i] =＆＃34; images / Image2＆＃34; +（i + 1）+＆＃34; .png＆＃34 ;;

对于您的代码，首先您每1秒钟快速更改一次图像。

它应该是这样的：

function ChangeImage() {
    for (var i = 0; i < Test.length; i++) {
       setTimeout(function(){document.getElementById('Test_Image').src = Test[i]; 
        }, (i+1) *1000);      
    }      

   if(play){
     setTimeout("ChangeImage()", Test.length * 1000);        
   }
}

这不会在任何时候暂停javascript代码。

1秒后它将放置image21，2秒后图像21，它将再次自我调用，它将重新开始;

我把变量播放，以便你可以根据需要停止动画。

Answer 2

尝试这样的事情。

修改：意外地将setTimeout代替setInterval。感谢桑蒂指出。

var Test = new Array();
Test.length = 2;

for (var i = 0; i < Test.length; i++) { 
    Test[i] = new Image();
    Test[i].src = "images/Image2" + (i+1) + ".png";
}

var count = 0;

function ChangeImage() {
  if (count >= Test.length)
    count = 0;
  document.getElementById('Test_Image').src = Test[count].src;  
  count++;   
}   

setInterval(ChangeImage, 1000);

Answer 3

setTimeout()没有阻止。这意味着它只会安排活动在未来的某个时间发生，而其余的Javascript只会继续运行。因此，您在1秒后的同一时间内安排了Test.length setTimeout()所有内容。相反，您需要安排下一个图像更改，然后，当该计时器触发时，您将在此之后安排该图像，依此类推。

如果您只想在一秒钟内循环浏览各种图像，则可以执行此操作：

function ChangeImage() {
    var cntr = 0;

    function next() {
        if (cntr < Test.length) {
            document.getElementById('Test_Image').src = Test[cntr++].src; 
            // after changing src, schedule next change for 1 second from now
            setTimeout(next, 1000);
        }
    }
    // start first iteration
    next();
 }   

 ChangeImage();

您可能还需要确保所有图像都已正确预加载，以便在设置其来源时立即显示。有许多方法可以确保在开始旋转之前完成预加载，例如：

Image preloader javascript that supports events

How do you cache an image in Javascript

Answer 4

您的for循环切换src一次并立即将其切换回来，因此您无法看到它发生变化。试试这个：

var Test = [];

for (var i = 0; i < 2; i++) {
    Test.push("images/Image2" + (i+1) + ".png");
};

var x = 0;
document.getElementById('Test_Image').src = Test[x];

(function ChangeImage() {
    if(++x >= Test.length) x = 0;
    document.getElementById('Test_Image').src = Test[x];
    setTimeout(ChangeImage, 1000);
})();

编辑：正如桑蒂指出的那样，我原来的解决方案只支持两个图像，而OP要求循环一个数组。

图像不变

4 个答案: