Question

我需要更改Fadein背景，但我的代码不起作用。什么错了？！

这是我的代码：

$(document).ready(function () {
    var fundoimg = 1;
    var carrossel = function () {
        if(fundoimg === 1) {
            var troca1 = $(".jumbotron").css("background-image","url('../images/bg1.png')");
            troca1.fadeIn("slow");
            fundoimg = 2;
        } else {
            var troca2 = $(".jumbotron").css("background-image","url('../images/bg2.png')");
            troca2.fadeIn("slow");
            fundoimg = 1;
        }
    }

    setInterval(carrossel,3000);
});

这是我的CSS代码＆＃34; JUMBOTRON＆＃34;：

.jumbotron {
    text-align: center;
    background-size: 17% 100%;
    background-repeat: no-repeat;
    background-position: right;
    background-color: #000000;
    background-image: url('../images/bg1.png');
}

以下是文档中的行：

<script type="text/javascript" src="scripts/carrossel.js"></script>

至少但不是最后，我的文件树：

projectfolder\index.html
projectfolder\css\style.css
projectfolder\images\*.png
projectfolder\scripts\*.js

可能有什么问题？！

Answer 1

您的代码有效，因此您的路径错误，您的div不存在，没有大小，或者代码不在页面上。

＆＃13;

$(document).ready(function () {
    var fundoimg = 1;
    var carrossel = function () {
        if(fundoimg === 1) {
            var troca1 = $(".jumbotron").css("background-image","url('http://i.imgur.com/o5jk8hA.jpg')");
            troca1.fadeIn("slow");
            fundoimg = 2;
        } else {
            var troca2 = $(".jumbotron").css("background-image","url('http://i.imgur.com/ArSY9CS.jpg')");
            troca2.fadeIn("slow");
            fundoimg = 1;
        }
    }

    setInterval(carrossel,3000);
});

＆＃13;

.jumbotron {
    text-align: center;
    background-size: 17% 100%;
    background-repeat: no-repeat;
    background-position: right;
    background-color: #000000;
    background-image: url('http://i.imgur.com/ArSY9CS.jpg');
  width:500px; height: 500px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="jumbotron">

</div>

＆＃13;

改变背景

1 个答案: