使用jQuery更改网页背景图片

Question

使用jQuery更改网页背景图片

3

我决定制作一个函数，每10秒更换一次页面的背景图片。

function Background()
{
    var Background_Stage;
    switch(Background_Stage)
    {
        case 0:
        {
            $('body').css.('background', '#000 url(../../Styles/Callum_Project1/Images/BACKGROUND_1_TEST.png) no-repeat');
            Background_Stage++;
            setInterval(function(){Background()},10000);
        }
        case 1:
        {
            $('body').css.('background', '#000 url(../../Styles/Callum_Project1/Images/BACKGROUND_2_TEST.png) no-repeat');
            Background_Stage++;
            setInterval(function(){Background()},10000);
        }
        case 2:
        {
            $('body').css.('background', '#000 url(../../Styles/Callum_Project1/Images/BACKGROUND_2_TEST.png) no-repeat');
            Background_Stage = 0;//Reset 
            setInterval(function(){Background()},10000);
        }
    }
}

然而，当我做了像这样的事情时：

<body onload="Background()"></body>

它似乎没有任何作用，这可能是一个愚蠢的请求帮助，但这是我学习JavaScript时做的第一件事情，我应该说我大部分时间都在使用jQuery。

- Callum

2

你从哪里获取 Background_Stage 变量的值？ - Dhaval Marthak

您在 .css 后面多了一个 .。 - andi

请查看我的更新答案。更简单，不需要jQuery。我包含了注释，这样你就能明白正在发生什么了。 - m59

4个回答

2

你也可以尝试这个方法：

function Background(){
    var imgs = [
            "../../Styles/Callum_Project1/Images/BACKGROUND_1_TEST.png",
            "../../Styles/Callum_Project1/Images/BACKGROUND_2_TEST.png",
            "../../Styles/Callum_Project1/Images/BACKGROUND_3_TEST.png"
        ],
        len = imgs.length,
        idx = -1;

    setInterval(function(){
        idx = (idx+1)%len;
        $("body").css("background", "#000 url("+imgs[idx]+")");
    }, 10000);
}

- Manu Goel

0

你的Backgroud_Stage没有初始化
你的setInterval放置会导致非常严重的问题
还有无效的语法。

总的来说，你的代码可以像这样更简单：

var Stage = 0;
setInterval(function() {
    var bg = '#000 url(../../Styles/Callum_Project1/Images/BACKGROUND_'+(Stage+1)+'_TEST.png) no-repeat';
    document.body.style.background = bg;
    Stage = ++Stage % 3;
}, 10000);

- user2736012

0

每次调用background函数时，都会实例化一个名为Background_Stage的新本地变量，并将其值设置为undefined。这与您的任何switch选项都不匹配。

您需要在函数外部声明该变量（以便它在对函数的调用之间保持存在），并给它一个起始值。

- Quentin

$('body').css('background',... 的正确写法应该是 $('body').css('background',...，不需要在 css 后面加上句点。 - EdenSource

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ben Jackson · Accepted Answer

您的代码存在以下几个问题：

Background_Stage 的值在 Background 函数调用之间不会保留，并且无论如何，您都没有为 Background_Stage 赋值。
使用 setTimeout 而不是 setInterval。setTimeout 在分配的时间结束时仅调用一次函数。setInterval 会一直调用相同的函数，直到明确取消为止。按照您的方式，您最终会有许多并发的 setIntervals 运行。
您不需要在 css 和随后的括号之间加上“.”。

最后，尽量不要重复自己，这意味着如果您发现自己反复输入更多或者更少相同的语句，那么您可能可以使代码更清晰。例如：

(function() 
{
    var bgCounter = 0,
        backgrounds = [
           "../../Styles/Callum_Project1/Images/BACKGROUND_1_TEST.png",
           "../../Styles/Callum_Project1/Images/BACKGROUND_2_TEST.png",
           "../../Styles/Callum_Project1/Images/BACKGROUND_3_TEST.png"
        ];
    function changeBackground()
    {
        bgCounter = (bgCounter+1) % backgrounds.length;
        $('body').css('background', '#000 url('+backgrounds[bgCounter]+') no-repeat');
        setTimeout(changeBackground, 10000);

    }
    changeBackground();
})();

现在更改背景URL或添加更多内容只需编辑背景数组即可。