Question

所以我试图从一组三个图像中旋转背景图像。我想出了一种方法来做到这一点，但这里有一些蠢事。从下面的例子中你应该得到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>

Answer 1

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

如果在执行此代码时i等于2，会发生什么？它会增加到3，然后在newBg[i]中使用，这会导致newBg[3]的不必要访问。你可以通过用i = (i+1) % 3;替换if-else来修复它（这里使用的%称为模运算符。）

Answer 2

@tcovo说的话。

除非我会这样做：

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

改变背景图像jquery

2 个答案: