Question

我无法让它工作，我只是希望图像无休止地循环。什么不对吗？

var croppingImages = new Array()
croppingImages[0] = "https://img.f1today.eu/x/topstory/58c7e187745517a1c90fc5ebe21c55da49223c999500b.jpg";
croppingImages[1] = "https://pbs.twimg.com/media/C69Y8aWW0AEkCIW.jpg:small";
setTimeout("animateImages()", 100);
var cropImg = 0;
    
function animateImages() {
  document.getElementById("cropping__animation").src = croppingImages[cropImg]
  x++;
}

<img src="https://img.f1today.eu/x/topstory/58c7e187745517a1c90fc5ebe21c55da49223c999500b.jpg" id="cropping__animation">

Answer 1

这里有几件事。

1）cropImg永远不会增加，因此animateImages将始终显示相同的图像

2）animateImages只会被setTimeout

调用一次

此代码效果更好：

var cropImg = 0;
var croppingImages = new Array()

croppingImages[0] = "https://img.f1today.eu/x/topstory/58c7e187745517a1c90fc5ebe21c55da49223c999500b.jpg";
croppingImages[1] = "https://pbs.twimg.com/media/C69Y8aWW0AEkCIW.jpg:small";

animateImages();

function animateImages() {
  document.getElementById("cropping__animation").src = croppingImages[cropImg];

  if (++cropImg > croppingImages.length - 1)
  {
    cropImg = 0;
  }

  setTimeout(function() {
    animateImages();
  }, 3000);
}

https://jsfiddle.net/y6bhgm53/5/

Answer 2

如果你想循环它们，你可能应该使用setInterval（）而不是setTimeout（）。此外，您应该通过检查值是否大于数组长度来使cropImg变量循环。

https://jsfiddle.net/nyxeen/y6bhgm53/6/

我希望它有所帮助

var croppingImages = new Array()
croppingImages[0] = "https://img.f1today.eu/x/topstory/58c7e187745517a1c90fc5ebe21c55da49223c999500b.jpg";
croppingImages[1] = "https://pbs.twimg.com/media/C69Y8aWW0AEkCIW.jpg:small";
setInterval(animateImages, 100);
var cropImg = 0;

function animateImages() {
  document.getElementById("cropping__animation").src = croppingImages[cropImg]
  cropImg++;
  if(cropImg>=croppingImages.length)cropImg=0
}

<img src="https://img.f1today.eu/x/topstory/58c7e187745517a1c90fc5ebe21c55da49223c999500b.jpg" id="cropping__animation">

在X毫秒后替换并循环图像

2 个答案: