jquery - 我希望我的 body 背景图像每 5 秒淡入淡出一次，如果不是至少每 5 秒改变一次

Question

我找到了similar answers但无法将其适应我的网站。我对 HTML、JavaScript 和 CSS 很陌生，所以请耐心等待。

我希望我的背景从 bg0.jpg 更改为 bg1.jpg 到 bg2.jpg，然后返回 bg0 .jpg.

我正在使用 Dreamweaver。

我的源代码链接到 jquery.js 和 imagefader.js。

我的 style.css 文件也链接到我的源代码。

css 文件应用正文背景图片:

body {
  background-image:url(../images/backgrounds/bg0.jpg);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center;
}

我的 imagefader.js 具有以下内容:

(function() {
  var curImgId = 0;
  var numberOfImages = 3; // Change this to the number of background images
  window.setInterval(function() {
    $('body').css('background-image','url(/background' + curImgId + '.jpg)');
    curImgId = (curImgId + 1) % numberOfImages;
  }, 5 * 1000);
})();

问题是 5 秒后从 bg0.jpg 变为白色背景，而不是 bg1.jpg。

结果可以在这里看到。 http://mrinalikamath.in

请帮我修改文件，以便我得到所需的结果。

Answer 1

路径错误。

$('body').css('background-image','url(/background' + curImgId + '.jpg)');

您的图像位于 ../images/backgrouds/中，第一次尝试尝试 URL http://mrinalikamath.in/background0.jpg .

但是，您想要 http://mrinalikamath.in/images/backgrounds/bg0.jpg :

 $('body').css('background-image','url(/images/backgrounds/bg' + curImgId + '.jpg)');

我极力推荐 Fiddler 来帮助解决此类问题。它显示来自浏览器的每个 http 请求，以便您可以看到 404。

http://fiddler2.com/