Javascript HTML&；JS无限背景循环

因为我对Js&html比较陌生，所以我想循环一个背景图像，其中一个图像会快速闪烁。我目前面临的问题是将整个过程带入一个无限循环

setTimeout(function ()
{
    document.body.style.backgroundImage = 'url(\'source/css/IMAGES/introInvertImage.jpg\')';
    setTimeout(function ()
    {
        document.body.style.backgroundImage = 'url(\'source/css/IMAGES/introImage.jpg\')';
    }, 300);
}, 3000);

---

如果我通过for或while将这段代码放入无限循环中，它会中断整个页面。

使用两个函数，这两个函数将以无限方式相互调用

function firstPicture() {
  document.body.style.backgroundImage = '...';

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

function secondPicture() {
  document.body.style.backgroundImage = '...';

  setTimeout(function() {
    firstPicture();
  }, 300);
}

firstPicture();

---

或者在一个函数中

var pictureState = false;

function pictureChanging() {
  var timeout;

  if (pictureState) {
    document.body.style.backgroundImage = '...';

    timeout = 3000;
  } else {
    document.body.style.backgroundImage = '...';

    timeout = 300;
  }

  pictureState = !pictureState;

  setTimeout(function() {
    pictureChanging();
  }, timeout);
}

pictureChanging();

---

使用两个将以无限方式相互调用的函数

function firstPicture() {
  document.body.style.backgroundImage = '...';

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

function secondPicture() {
  document.body.style.backgroundImage = '...';

  setTimeout(function() {
    firstPicture();
  }, 300);
}

firstPicture();

---

或者在一个函数中

var pictureState = false;

function pictureChanging() {
  var timeout;

  if (pictureState) {
    document.body.style.backgroundImage = '...';

    timeout = 3000;
  } else {
    document.body.style.backgroundImage = '...';

    timeout = 300;
  }

  pictureState = !pictureState;

  setTimeout(function() {
    pictureChanging();
  }, timeout);
}

pictureChanging();

---

为了澄清一下，您有两个图像需要切换。或者可能有多个图像需要切换？为了澄清，您有两个图像需要切换。或者您需要切换多个图像？非常感谢，它们都按预期工作。我试了一个和第一个相似的，但我的根本不起作用。你应该为此提出一个新问题。它与我为您描述的功能无关，现在是css修改的东西。非常感谢，它们都按预期工作。我试了一个和第一个相似的，但我的根本不起作用。你应该为此提出一个新问题。它与我为您描述的函数无关，它现在是css修改的东西。