javascript - X毫秒后替换并循环播放图像

我无法使它正常工作，我只希望图像无限循环。这里不对吗？

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">

最佳答案

这里有几件事。

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/