1

私は本当に簡単なことをしようとしています。5秒ごとにjQueryを使用してページの背景画像を変更します。

プロジェクトはASP.NetMVC 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);
});

背景は実際には5秒ごとに更新されますが、ナビゲーションメニューがあるセクションと、スタイルシートで最初に設定された背景画像は同じままです。

スクリプトのdocument.body.backgroundステートメントの代わりに、次のことを実行しようとしました。

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

しかし、それを行うと何も起こらないように見えますが、画像は更新されず、ページに目に見える変化は表示されません。

パズルの欠けている部分は何ですか？

4

1 に答える 1

0

これに2つのステップで取り組みます。

まず、背景画像の動的な部分を取り出します...setBackgroundImage関数を次のようなものに変更します

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

2番目-動的な部分を追加し直し、imageUrl変数に有効な画像へのパスが含まれていることを確認します。

于 2012-08-20T18:15:51.680 に答える