在jquery中改变具有淡入淡出效果的主体背景图像 [英] Change the body background image with fade effect in jquery

问题描述

嘿，我想淡入一个新的背景图片，每隔60秒说一次。我设置的背景图像像这样：

Hey i want to fade in a new background image let´s say every 60 seconds. I´ve set the background image like this:

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

现在我想更改它，所以在60秒后它更改为background2.jpg，然后60秒后到background3 .jpg等等。

Now i want to change it, so after 60seconds it changes to background2.jpg, then after 60 seconds to background3.jpg and so on..

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

I´ve found a lot of stuff without changing it in the body but just as an image... any quick solutions?

谢谢！

推荐答案

Re-UPDATE UPDATE：

甚至NEWER Fiddle（无arguments.callee）

更改：

• Javascript改进


• CSS修正


• 添加了图片随机序列的选项，而不是连续的


• =>替代版本的NEWER Fiddle< =（如果OP的img服务器已关闭）

• Javascript improvements
• CSS corrections (fits full page now)
• Added option for random sequence of images instead of sequential
• => Alternate version of NEWER Fiddle <= (if OP's img server is down)

Took这个代码的肉从这个以前的答案，并添加了一些bling（使用我的网站背景存储哈哈）

Took the meat of this code from this previous answer and added some bling (using my site background stash 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);
}

这篇关于在jquery中改变具有淡入淡出效果的主体背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！