时间戳

首页 > 解决方案 > Jquery函数每5秒更改一次背景图像不起作用

javascript - Jquery函数每5秒更改一次背景图像不起作用

问题描述

我在jquery中有以下功能：

window.onload = function() {

    $(function () {
        var images = ["banner.png", "banner2.png"];
        var i = 0;
        setInterval(function () {
            i++;
            if (i == images.length) {
                i = 0;
            }
            $("#banner").fadeOut("slow", function () {
                $(this).css("background", "url(../media/img/" + images[i] + ") no-repeat");
                $(this).fadeIn("slow");
            });
        }, 5000);
    });
}

我希望它每 5 秒更改一次背景，但是它会更改为空背景，这是 CSS 代码：

#banner{
    position: absolute;
    top: 32px;
    width: 100%;
    background: url(../media/img/banner.png) no-repeat;
    height: 628px;

只是为了记录，我的文件中有一个banner2.png，我不明白出了什么问题

标签： javascriptjquerycss

解决方案

相对的 CSS 路径可能很棘手（这让我犯错的次数比我承认的要多）

在 CSS 文件中，路径是相对于该 CSS 文件的

通过javascript设置时，相对于页面的HTML文件

所以，如果你的文件夹布局像

root
|- css
|   |- style.css
|
|- media
|   | - banner.jpg
|   | - banner1.jpg
|
|- index.html

然后 CSS 会将banner.jpg 引用为../media/banner.jpg

但是在 index.html 中从 javascript 设置背景时......路径是./media/banner.jpg甚至media/banner.jpg

所以

$(this).css("background", "url(./media/img/" + images[i] + ") no-repeat");

或者

$(this).css("background", "url(media/img/" + images[i] + ") no-repeat");

或者（我认为更容易阅读 - 但在 Internet Explorer 中不可用）使用模板字符串（即在反引号中） - 同样，只需更改，background-image因为no-repeat原始 CSS 中的

$(this).css("background-image", `url(media/img/${images[i]})`);

您甚至可以使用"似乎不是必需的，但随处显示的都有background-image记录

$(this).css("background-image", `url("media/img/${images[i]}")`);

虽然，我认为这不太可读（❁´◡`❁）

推荐阅读