Question

我有三张背景图片，我需要每隔几秒钟更换一次。我的想法是使用setTimeout，它将在用IF指令检查后替换后台url并再次调用该函数。这样做的好方法吗？我试着自己写，但无论如何它都不起作用呃。有人可以看一下吗？

            changeBackground();

    function changeBackground(){
        var currentBackground = $("body").css("background-image");

        setTimeout(function(){
            if(currentBackground == "url(/images/new-home-page/woman.png)"){
                $("body").css("background-image", "url(/images/new-home-page/woman2.png)");
            }
            if(currentBackground == "url(/images/new-home-page/woman2.png)"){
                $("body").css("background-image", "url(/images/new-home-page/woman3.png)");
            }
            if(currentBackground == "url(/images/new-home-page/woman3.png)"){
                $("body").css("background-image", "url(/images/new-home-page/woman.png)");
            }

            changeBackground();

        }, 3000);

Answer 1

您可以通过使用数组和使用计数器来改进此代码：

$(document).ready(function() {
    var backgrounds = ['/images/new-home-page/woman.png', 
                       '/images/new-home-page/woman2.png', 
                       '/images/new-home-page/woman3.png'],
    $body = $("body"),
    i = 0;

    function nextBackground()
    {
        $body.css("background-image", 'url("' + backgrounds[i++] + '")');
        i %= backgrounds.length;
    }

    nextBackground();
    setInterval(nextBackground, 3000);
});

这是working JSFiddle demo。

另请注意，setInterval和setTimeout并不保证准确无误。

Answer 2

在您的代码中，如果条件正在执行，则全部为3，所以如果cond＆＃39;则使用if-else而不是3 ..

instead use setInterval()

示例.. https://jsfiddle.net/m9jbrb5n/1/

Answer 3

您可以使用以下代码作为所需内容的基础并更改ID，以便更好地适合您。

var backgrounds = ['/images/new-home-page/woman.png', 
                   '/images/new-home-page/woman2.png', 
                   '/images/new-home-page/woman3.png'],

var currentBackground;
setInterval(
    function (){
        if(currentBackground==undefined) currentBackground = backgrounds [0];
        $("body").css("background-image",'url("' +currentBackground+'")');
        currentBackground = backgrounds[backgrounds.indexOf(currentBackground) + 1];
    }
,3000)

Answer 4

使用setInterval()代替setTimeout()

changeBackground();

function changeBackground(){
    var currentBackground = $("body").css("background-image");

    setInterval(function(){

        if(currentBackground === "/images/new-home-page/woman.png"){
            $("body").css("background-image", "url(/images/new-home-page/woman2.png)");
        } else if(currentBackground === "/images/new-home-page/woman2.png"){
            $("body").css("background-image", "url(/images/new-home-page/woman3.png)");
        } else if(!!!currentBackground || currentBackground === "/images/new-home-page/woman3.png"){
            $("body").css("background-image", "url(/images/new-home-page/woman.png)");
        }
    }, 3000);
}

setTimeout()被调用一次。您在changeBackground()内调用setTimeout()，正在重置“背景图片”样式。因此，你看不到任何变化。

Answer 5

这是完全正常工作的代码。

    changeBackground();

    function changeBackground(){
        var currentBackground = $("body").css("background-image");

        setTimeout(function(){
            if(currentBackground == 'url("http://localhost/images/new-home-page/woman.png")'){
                $("body").css("background-image", 'url("/images/new-home-page/woman2.png")');
            }
            else if(currentBackground == 'url("http://localhost/images/new-home-page/woman2.png")'){
                $("body").css("background-image", 'url("/images/new-home-page/woman3.png")');
            }
            else if(currentBackground == 'url("http://localhost/images/new-home-page/woman3.png")'){
                $("body").css("background-image", 'url("/images/new-home-page/woman.png")');
            }

            changeBackground();

        }, 3000);
    }

重复更改背景图像

5 个答案: