-1

X秒ごとに2つのdivタグの背景を変更するJavaScriptコードを作成しようとしています。これが私のコードです：

HTML

<div id="bg_left"></div>
<div id="bg_right"></div>

CSS本体{高さ：100％; }

#bg_left{
   height:100%;
   width:50%;
   left:0;
   position:fixed;
   background-position:left;
}
#bg_right{
    height:100%;
    width:50%;
    right:0;
    position:fixed;
    background-image:url(http://presotto.daterrawebdev.com/d/img/pp_hey_you_bg.png);
    background-position:right;
}

JAVAスクリプト

 function carousel_bg(id) {
     var bgimgs = [  'pp_hey_you_bg.png', 'burningman_bg.png' ]; 
     var img1 = bgimgs[id];
     var img2 = bgimgs[id+1];
     var cnt = 2; 

     $('#bg_left').css("background-image", "url(http://presotto.daterrawebdev.com/d/img/"+img1+")");
     $('#bg_right').css("background-image", "url(http://presotto.daterrawebdev.com/d/img/"+img2+")");

     id = id + 1;
     if (id==cnt) id = 0;

     setTimeout("carousel_bg("+id+")", 10000); 
 }

 $(document).ready(function() {
        carousel_bg(0);     
 });

背景画像はランダムに変化するはずですが、まったく変化しません。

4

3 に答える 3

5

OK、jsFiddleに問題があります。文字列をその文字列に渡すためsetTimeout()、最上位のスコープでのみ評価されます。ただし、渡した関数名は最上位のスコープではありません（jsFiddleのonloadハンドラーにあります）。そこで、jsFiddleでのJSの配置方法を変更して、最上位のスコープに追加しました。また、画像を選択するためのロジックを修正しました。これは、http：//jsfiddle.net/jfriend00/awVYP/で機能するようになりました。

setTimeout()そして、ローカル関数を渡し、クロージャを使用して現在のインデックスを追跡する、文字列を渡さないクリーンアップされたバージョン（javascriptを記述するためのはるかに優れた方法）は次のとおりです：http： //jsfiddle.net/jfriend00/ LVGNN /

    function carousel_bg(id) {
        var bgimgs = [  'pp_hey_you_bg.png', 'burningman_bg.png' ]; // add images here..

        function next() {
            if (id >= bgimgs.length) {
                id = 0;
            }
            var img1 = bgimgs[id];
            id++;
            if (id >= bgimgs.length){
                id = 0;
            }
            var img2 = bgimgs[id];

            $('#bg_left').css("background-image", "url(http://presotto.daterrawebdev.com/d/img/"+img1+")");
            $('#bg_right').css("background-image", "url(http://presotto.daterrawebdev.com/d/img/"+img2+")");
            setTimeout(next, 1000);
        }
        next();
    }

    $(document).ready(function() {
            carousel_bg(0);     
    });

OPのコードの以前のバージョンに関する以前のコメント：

$('#body')

する必要があります：

$('body')

またはさらに高速：

$(document.body)

また、jsFiddleには少し奇妙な問題があります。CSSのHTMLタグには背景画像がありますが、JavaScriptはbodyタグに半透明の背景画像を設定します。それは本当にあなたが望むものですか？

于 2012-12-12T19:11:37.620 に答える
1

テストのために、配列に別の画像を追加して、並べ替えを区別できるようにしました。

function carousel_bg(id) {
    var bgimgs = [  'http://presotto.daterrawebdev.com/d/img/pp_hey_you_bg.png', 'http://presotto.daterrawebdev.com/d/img/burningman_bg.png', 'http://gallery.orobouros.net/var/albums/2012/NewYorkComicCon2012/Legend-of-Korra/nycc_20121013_164625_0041.jpg?m=1354760251' ]; // add images here..
    var img1 = bgimgs[id+1];
    var img2 = bgimgs[id];
    var cnt = bgimgs.length; // change this number when adding images..

    $('#bg_left').css("background-image", "url("+img1+")");
    $('#bg_right').css("background-image", "url("+img2+")");

    id = id + 1;
    if (id== (cnt - 1) ) id = 0;

    setTimeout("carousel_bg("+id+")", 10000);
}

ここでの2つの変更：

  1. 合計画像数については、手動ではなく動的に配列内の画像の合計数を取得しています（bgimgs.length）
  2. id値をリセットする条件で、合計カウントを1減算します。JSにはゼロベースのインデックスがあるため、これを行わないと、未定義のエラーが発生します（3項目の配列は元のコードで値4を吐き出します。最後の反復）。

このコードは配列をループしますが、ランダムではありません。それは別のトピックです。

于 2012-12-12T20:01:34.967 に答える
1

JQueryを使用していない場合は、次の手順を実行してください。

document.body.style.backgroundImage="url(images/mybackgroundimage.jpg)";
于 2013-08-14T16:22:49.103 に答える