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。

4

4 回答 4

4

您的代码存在一些问题：

  • 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 或添加更多是编辑背景数组的简单工作。

于 2013-09-10T15:45:51.423 回答
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);
}
于 2013-09-10T15:58:52.607 回答
0

每次调用 background 时，都会实例化一个名为的新局部变量。这与您的任何选项都不匹配。Background_Stageundefinedswitch

您需要在函数之外声明变量（因此它在函数调用之间保持不变）并为其提供起始值。

于 2013-09-10T15:34:36.113 回答
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);
于 2013-09-10T15:39:09.183 回答