0

だから私は私が持っている3つの画像のセットから背景画像を回転させようとしています。私はこれを行う方法を考え出しましたが、ここで何かの戦略が起こっています。以下の例から、i = 0、1、および2を取得する必要がありますが、それでも値3に達しています!! そしてnewBg[3]は未定義です！だからそれは10秒滞在します何も表示しません

ここで実用的な例を見つけることができます：http ：//www.goesenlinea.com/agus/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--[if IE ]>
    <link href="css/bootstrap.min.ie.css" rel="stylesheet">
    <![endif]-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jqueryBg.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <style>
        body { 
            background: url('img/fond1.png') no-repeat center center fixed;
            background-color: black;
            -moz-background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            -webkit-transition: 2s;
            -moz-transition: 2s;
            -ms-transition: 2s;
            -o-transition: 2s;
            transition: 2s;

        } 
        .blackbox {
            /*border-top: 1px solid #2b2b2b;*/
            border-left: 1px solid #2b2b2b;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            background: url('img/boxes_background_color_1x1.png') repeat transparent;
        }

    </style>
    <script>
        var newBg = ['img/fond1.png', 'img/fond2.png', 'img/fond3.png'];
        var i = 0;
        var rotateBg = setInterval(function(){
            if(i==3)
                i=0;
            else
                i++;
            $('body').css({backgroundImage : 'url(' + newBg[i] + ')'});
        }, 10000);
    </script>
</head>

<body>
    <div class="container-fluid" >

        <div class="row-fluid">
            <div class="span2">
                <!-- espaciador izquierda -->
            </div>
            <div class="span8 blackbox">
                <div class="span12" >
                    <img src="img/logo glx.png" />
                    <div class="row-fluid">
                        <div class="span12">
                            <div class="navbar navbar-inverse">
                                <div class="navbar-inner">
                                    <div class="container">

                                        <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
                                        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                                            <span class="icon-bar"></span>
                                            <span class="icon-bar"></span>
                                            <span class="icon-bar"></span>
                                        </a>

                                        <!-- Be sure to leave the brand out there if you want it shown -->
                                        <a class="brand" href="#">Project name</a>

                                        <!-- Everything you want hidden at 940px or less, place within here -->
                                        <div class="nav-collapse collapse">
                                            asdfasdfad
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div> 
            </div>
            <div class="span2">
                <!-- espaciador derecha -->
            </div>
        </div>
    </div>


</body>

4

2 に答える 2

4 
    if(i==3)
        i=0;
    else
        i++;
    $('body').css({backgroundImage : 'url(' + newBg[i] + ')'});

このコードが実行されたときにiが2に等しい場合はどうなりますか？3にインクリメントされてからnewBg[i]、で使用されます。これにより、の不要なアクセスが発生しますnewBg[3]。if-elseをi = (i+1) % 3;（%ここで使用されるモジュロ演算子と呼ばれます）に置き換えることで修正できます。

于 2013-03-14T18:41:52.327 に答える
2

@tcovoが言ったこと。

私がこのようにすることを除いて：

i++;
if ( i > 2 ){
    i = 0;
}
$('body').css({backgroundImage : 'url(' + newBg[i] + ')'});
于 2013-03-14T18:43:21.577 に答える