1

我正在尝试做一些非常简单的事情，每五秒钟使用 jQuery 更改页面的背景图像。

由于该项目是一个 ASP .Net MVC 4 项目，因此它具有相应的 _Layout 页面、@RenderSection、@RenderBody 以及框架提供的所有这些好东西。所以我的问题是我无法弄清楚我应该定位哪个元素以及如何更改图像。

拼图的部分如下：

在 _Layout.cshtml 文件上：

<body>
   <!-- some code that displays the navigation menu links -->

   <div id="body>
      @RenderSection("featured", required: false)
      <section class="content-wrapper main-content clear-fix">
         @RenderBody()
      </section>
   </div>
   <!-- some more code for the footer and some other irrelevant things -->
</body>

我有一个样式表文件，其中包含以下内容：

.main-content
{
   background-image: url("../Images/slide-1-728.jpg");
   opacity: 0.3;
}

最后jQuery脚本如下：

var backgroundHandler = {
    fileIndex: 1,
    backgroundImageFileName: "slide-1-728.jpg",

    updateBackgroundImage: function () {
        return backgroundHandler.backgroundImageFileName.replace(/-[0-9]+-/, "-" + ++backgroundHandler.fileIndex + "-");
    },

    setBackgroundImage: function () {
        document.body.background = $("#url").val() + backgroundHandler.updateBackgroundImage();
    }
};

$(document).ready(function () {
    setInterval(backgroundHandler.setBackgroundImage, 5000);
});

背景实际上确实每五秒更新一次，但是在导航菜单所在的部分和最初使用样式表设置的背景图像保持不变。

我尝试执行以下操作，而不是脚本上的 document.body.background 语句：

setBackgroundImage: function () {
    var imageUrl = $("#url").val() + backgroundHandler.updateBackgroundImage();
    $(".main-content").css("background-image", imageUrl);
}

但是当我这样做时，似乎什么也没发生，图像没有更新，页面上也没有出现可见的变化。

拼图中缺少的部分是什么？

4

1 回答 1

0

分两步解决这个问题。

首先 - 取出背景图像的动态部分......将您的 setBackgroundImage 函数更改为类似

$("body").css("background-image", "url(some absolute url to an image);");

其次 - 重新添加动态片段，确保 imageUrl 变量具有指向其中有效图像的路径。

于 2012-08-20T18:15:51.680 回答