0

所以我试图从我拥有的一组三个图像中旋转背景图像。我想出了一种方法来做到这一点，但这里发生了一些奇怪的事情。从下面的示例中，您应该得到 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 回答