2

何が間違っているのかわかりません。div の背景画像を時間の経過とともに変化させようとしています。このサイトから jQuery 関数を取得しましたが、うまくいきません。私が間違っていることの手がかり。

jQuery

$(window).load(function () {
    var images = ['wave_01.png', 'wave_02.png'];
    var i = 0;

    function changeBackground() {
        $('main').css('background-image', function () {
            if (i >= images.length) {
                i = 0;
            }
            return 'url(' + images[i++] + ')';
        });
    }
    // Call it on the first time
    changeBackground();
    // Set an interval to continue
    setInterval(changeBackground, 3000);
});

HTML

<div class="main"></div>

CSS

.main {
    background-image: url(../images/wave_01.png);
    background-repeat:no-repeat;
    background-size: 100% 40%;
}
4

4 に答える 4

1

これを試してください:ライブデモ

HTML (問題なし)

<div class="main" ></div>

CSS

空の を使用している場合div、背景は表示されません。

.main {
    background-image: url(wave_01.png);
    background-repeat:no-repeat;
    background-size: 100% 40%;
    width:200px;
    height:200px;
}

jQuery

を使用し$(document).readyます。.mainクラスのメインにセレクターを使用します。画像ファイルのパスが配列内で適切であることを確認してください。

$(document).ready(function () {
    var images = ['wave_01.png', 'wave_02.png'];
    var i = 0;

    function changeBackground() {
        $('.main').css('background-image', function () {
            if (i >= images.length) {
                i = 0;
            }
            return 'url(' + images[i++] + ')';
        });
    }
    // Call it on the first time
    changeBackground();
    // Set an interval to continue
    setInterval(changeBackground, 3000);
});
于 2013-02-04T04:29:52.567 に答える
0

セレクターにタイプミスがあります。「main」がありますが、「.main」を意味します。

于 2013-02-04T03:44:18.597 に答える
0

メインのセレクターに問題があります。className に基づいて要素を選択するには、.main を使用する必要があります

以下のコードを試してください。

$(window).load(function(){
     var images = ['wave_01.png','wave_02.png'];
    var i = 0;

    function changeBackground() {
    $('.main').css('background-image', function() {
        if (i >= images.length) {
            i=0;
        }
        return 'url(' + images[i++] + ')';      
    });
}
// Call it on the first time
changeBackground();
// Set an interval to continue
setInterval(changeBackground, 3000);
});
于 2013-02-04T04:00:37.753 に答える
0

JavaScript で画像へのパスは正しいですか? あなたが持っている：

var images = ['wave_01.png', 'wave_02.png'];

しかし、あなたのCSSでは次のとおりです。

background-image: url(../images/wave_01.png);

これは、画像が Javascript と同じフォルダーにあることを示しています。そうですか？プロジェクトがそのように構成されている場合、これは必ずしも正しくありませんが、確認する価値があります。実際にはおそらくエラーだと思いますが、Javascriptが「images」フォルダーにある必要があるためです。

CSS と Javascript がすべて同じ HTML ファイルにある場合は、パスを同じにします。

var images = ['../images/wave_01.png', '../images/wave_02.png'];

よくわからない場合は、'/images/wave_01.png'代わりに絶対パス (例) で両方を試してください。

また、それが単なるタイプミスかどうかはわかりませんが、代わりにセレクター$('main')が間違いなくあるはず$('.main')です。

于 2013-02-04T04:10:29.530 に答える