图像没有改变

Image not changing

本文关键字：改变 图像      更新时间：2023-09-26

嗨，我试图通过改变图像下面的代码得到一个图像眨眼。我的"setTimeout"有问题吗?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();

First…新的Image()部分使您变得复杂。你可以直接使用Test[i] = "images/Image2" + (i+1) + ".png";

对于你的代码，首先你改变图像非常快每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秒后，它会再次调用自己，然后再开始;

我设置了变量play，这样你就可以在需要的时候停止动画了

setTimeout()未阻塞。这意味着它只安排一个活动在未来的某个时间发生，而Javascript的其余部分只是继续运行。所以，你在同一时间安排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();

你可能还需要确保你所有的图像都是正确预加载的，这样当你设置它们的来源时它们就会立即显示。有许多方法可以确保在开始旋转之前完成预加载，例如:

支持事件的图像预加载器javascript

如何在Javascript中缓存图像

试试这样做。

Edit:不小心用setTimeout代替setInterval。谢谢Santi指出这一点。

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

您的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);
})();

编辑:正如Santi指出的，我原来的解决方案只支持两个图像，而OP要求循环通过一个数组。

相关文章：