个人中心
gpt4 book ai didi

jquery - 更改背景图像jquery

转载 作者：太空宇宙 更新时间：2023-11-03 20:18:44 25 4
gpt4 key购买 nike

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

最佳答案 

    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; 来修复它(此处使用的 % 称为模运算符)。

关于jquery - 更改背景图像jquery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15417485/

25 4 0
文章推荐： matlab - 比较字符时，ischar(x) && x == 'b' 是否等同于strcmp(x, 'b' )？
文章推荐： C# 正则表达式返回括号中的数字
文章推荐： C# 5 Async Await .Task.Factory.StartNew 取消
文章推荐： html - 如何在 html/css 中对齐 'a' 元素
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com