Question

我有以下代码：

    $(document).ready(function() {
  var bgimages=new Array()
  bgImages[0]="bg.jpg"
  bgImages[1]="bg2.jpg"
  //sloppy preload images
  var pathToImg=new Array()
  for (i=0;i<bgImages.length;i++)
  {
    pathToImg[i]=new Image()
    pathToImg[i].src=bgImages[i]
  }

  var i = 0;
  var rotateBg = setInterval(
  function(){
    $('body').css({backgroundImage:'url(' + bgImages[i] + ')'});
      i++;
   }, 9000);
});

我需要帮助解决2个问题：

它只会循环一次图像，我错过了什么？我希望它能无休止地重复。
如何交叉淡入淡出图像？

Answer 1

您需要确保不要超出数组的上限进行索引。

在您的情况下，一个简单的按位XOR就可以完成工作：

i ^= 1;

如果数组中有更多元素，则模运算可以完成这项工作：

i++; i %= bgImages.length;

对于交叉淡入淡出，您可能需要考虑CSS transitions。页面上甚至有一个例子。但是，这是一个W3C工作草案，目前只有基于Webkit的浏览器支持它。 Firefox应该在年底前支持它。没有关于IE是否会支持它以及何时支持的说法。好的是创建起来非常简单，不需要JS。

摘录：

<style type="text/css">
div.fader img { -webkit-transition: all 1s ease-in-out; }
img.swap1, div.fader:hover img.swap2 { opacity: 1.0; }
div.fader:hover img.swap1, img.swap2 { opacity: 0; }
</style>

Answer 2

你可以尝试

function(){
i=i<bgImages.length?i:0;
$('body').css({backgroundImage:'url(' + bgImages[i] + ')'});
      i++;
   }
}

这会在每次到达数组末尾时将i重置为0

jquery $（'body'）图像交换帮助

2 个答案: