3

私のWebサイトでは、setIntervalで変化する2つの背景画像が必要ですが、これを機能させる方法がわかりません/

CSS:

body {
        padding-top: 20px;
        padding-bottom: 40px;
        background-image: url(/Assets/img/image1.jpg), url(/Assets/img/image2.jpg);
        background-repeat: repeat-x, repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

.js:

$(document).ready(function () {

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

setInterval を使用して image1.jpg と image2.jpg を切り替えるには、助けが必要です

編集

私は自分のjsを次のように変更しました:

  $(document).ready(function () {
        setInterval(function () {
            $('body').toggleClass("/Assets/Style/background/Images1.css", "/Assets/Style/background/Images2.css");
        }, 15000);
    });

2 つの css クラスを追加しました:

Images1.css:

body {

    background-image: url(/Assets/img/image1.jpg);
}

Images2.css:

body {

    background-image: url(/Assets/img/image2.jpg);
}

それでも私の背景は変わらない

4

1 に答える 1

5

簡単にするために、必要な画像を含む 2 つの CSS クラスを用意します。最初のクラスをデフォルトとして設定し、次のようにします。

$(document).ready(function () {
    setInterval(function() {
          $('body').toggleClass('class2');
    }, 15000); 
});

ワーキングデモ

于 2013-05-14T08:52:07.950 に答える