使用 jQuery 更改正文背景图像

Change body background image with jQuery

本文关键字：背景 图像 正文 jQuery 使用      更新时间：2023-09-26

我决定创建一个函数，每 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。

你的代码有几个问题：

  • Background_Stage 的值不会在对后台的调用之间保留，并且在任何情况下，您都不会为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 或添加更多是编辑背景数组的简单工作。

你也可以试试这个：

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

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

您需要在函数

外部声明变量（以便它在调用函数之间持续存在）并为其提供起始值。

  • 您的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);
相关文章：