更改背景

Changing Backgrounds

本文关键字：背景      更新时间：2023-09-26

我需要更改淡入淡出背景，但我的代码不起作用。怎么了？！

这是我的代码：

$(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);
});

这是我这个"JUMBOTRON"的CSS代码：

.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

可能出了什么问题？！

您的代码工作正常，因此要么您的路径错误，要么您的div不在那里，要么它没有大小，要么代码不在页面上。

$(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);
});
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="jumbotron">
</div>

相关文章：