Question

我正在尝试制作一个背景，每隔几秒就会改变它的图像。我需要淡入效果，淡出效果，这就是我使用<img>的原因。

图像淡入2秒，8秒后淡出2秒。然后选择另一个图像，一切都重复。

它有效，但它每隔一段时间（随机）跳过一个循环。图像淡出，8秒内没有任何反应。然后出现一个新图像。它发生了很多，这就是为什么我需要修复它。我在Chrome和Opera上遇到过这个问题。我的朋友在Firefox上对它进行了测试，并表示他没有得到这个问题，当他在Internet Explorer上测试它时（我不知道哪个版本，但它在Windows 8.1上）并且问题出现了，但它仍然是空白的。发生错误时没有出现新图像。

我真的在这个问题上摸不着头脑，我无法解决这个问题。

我正在使用这个jQuery代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
  var aImages = new Array();
  var iPrev = 0;
  var iRnd = 0;

  aImages[0] = "images/background01.jpg";
  aImages[1] = "images/background02.jpg";
  aImages[2] = "images/background03.jpg";
  aImages[3] = "images/background04.jpg";
  aImages[4] = "images/background05.jpg";

  $(document).ready(function() {
    $("img#bg").load(function() {
      $("img#bg").fadeTo(2000, 1);
      setTimeout(function() {
        $("img#bg").fadeOut(2000);
        setTimeout(LoadImages, 2000);
      }, 8000);
    });

    setTimeout(LoadImages, 200);
  });

  function LoadImages() {
    while(iPrev == iRnd) {
      iRnd = Math.floor(Math.random()*aImages.length);
    }
    $("img#bg").attr("src", aImages[iRnd]);
    iPrev = iRnd;
  }
</script>

我不认为css在这方面有一定的作用，但这里是：

img#bg {
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: auto;
    display: none;
    position: fixed;
    overflow: hidden;
}

为了保持简单，这里是html代码：

<body>
  <img id="bg">
</body>

Answer 1

我认为您之后的fadeOut和setTimeout之间会出现竞争状况。可能LoadImages在fadeOut完成之前运行一瞬间，这会导致load事件无法触发。

当我尝试你的代码时，我看到图片交替显示10秒，空白10秒，始终如一。

fadeOut()有一个complete参数，因此无需使用setTimeout来预测＆＃34;当fadeOut即将完成时。只需使用complete参数。

换句话说，替换它：

$("img#bg").fadeOut(2000);
setTimeout(LoadImages, 2000);

用这个：

$("img#bg").fadeOut(2000, LoadImages);

当我使用它时，我不会像使用原始代码那样进行开/关交替。

使用jQuery定期切换图像

1 个答案: