在jquery中使用淡入淡出效果更改正文背景图像

Question

嘿,我想淡出一个新的背景图像,让我们说每60秒.我设置了这样的背景图片:

body {background-image: url(background.jpg);}

现在我想改变它,所以在60秒后它变为background2.jpg,然后60秒后变为background3.jpg等等.

我发现很多东西没有在身体上改变它,但只是作为一个图像......任何快速的解决方案？

谢谢!

Answer 1

重新更新更新:

甚至NEWER小提琴(没有参数.callee)

变化:

• Javascript的改进
• CSS更正(现在适合整页)
• 添加了随机图像序列的选项而不是顺序
• => NEWER Fiddle的替代版本<=(如果OP的img服务器已关闭)

大新闻

从前面的答案中获取此代码的内容,并添加了一些金光闪闪(使用我的网站背景存储lol)

原始小提琴:)

新超级小提琴

使用Javascript:

$(document).ready(function () {
    var img_array = [1, 2, 3, 4, 5],
        newIndex = 0,
        index = 0,
        interval = 5000;
    (function changeBg() {

        //  --------------------------
        //  For random image rotation:
        //  --------------------------

            //  newIndex = Math.floor(Math.random() * 10) % img_array.length;
            //  index = (newIndex === index) ? newIndex -1 : newIndex;

        //  ------------------------------
        //  For sequential image rotation:
        //  ------------------------------

            index = (index + 1) % img_array.length;

        $('body').css('backgroundImage', function () {
            $('#fullPage').animate({
                backgroundColor: 'transparent'
            }, 1000, function () {
                setTimeout(function () {
                    $('#fullPage').animate({
                        backgroundColor: 'rgb(255,255,255)'
                    }, 1000);
                }, 3000);
            });
            return 'url(http://www.fleeceitout.com/images/field.' + img_array[index] + '.jpg)';
        });
        setTimeout(changeBg, interval);
    })();
});

CSS:

body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    background-image: url(http://www.fleeceitout.com/images/field.2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-attachment: fixed;
}
#fullPage {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    top: 0;
    left: 0;
    background-color: rgb(255, 255, 255);
}

Answer 2

您可以使用该setInterval方法并在CSS中定义的具有不同背景图像的类之间切换:

setInterval(function() {
    var $body = $('body');
    if($body.hasClass('background1'))
    {
        $body.removeClass('background1');
        $body.addClass('background2');
    }
    else {        
        $body.removeClass('background2');
        $body.addClass('background1');
    }
}, 1000);

小提琴

此示例使用的间隔为1000一秒.您可以在需要的任何时间段内更改此值.

UPDATE

注意到你的问题要求淡入淡出,所以我在body上添加了一个CSS3属性:

body
{
    transition: background 0.5s linear;
}

小提琴已经更新.

Answer 3

基于Dan-Nolan(以前称为user506980)的答案,您还可以将背景分配给数组,然后使用计数器从数组中调用每个背景

jsFiddle Demo

此外,您可以将setInterval函数指定给变量,然后稍后使用该变量来停止重复.

$(document).ready(function() {
    var cnt=0, bg;
    var $body = $('body');
    var arr = ['bg1.jpg','bg2.jpg','bg3.jpg','bg4.jpg','bg5.jpg','bg6.jpg'];

    var bgrotater = setInterval(function() {
        if (cnt==5) cnt=0;
        bg = 'url("' + arr[cnt] + '")';
        cnt++;
        $body.css('background-image', bg);
    }, 1000);

    //To stop the backgrounds from rotating. Note the critical step above
    //of assigning the setInterval function to a variable, in order to
    //use it again (below) to stop the repeating function
    $('#some_button_id').click(function() {
        clearInterval(bgrotater);
    });

}); //END document.ready

由于我建立在Dan-Nolan的答案之上,如果你赞成这个答案,请提出他的回答.而且我看到Deryck已经添加了他的,这也是正确的.给予好评.