HTML＆amp; JS无限背景循环

Question

因为我对Js＆amp; amp; 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);

如果我把这个片段放入无限循环中，或者在它打破整个页面的时候......

Answer 1

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

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