Javascript 切换主体背景

我希望有人能帮我，我有一个javascript代码可以切换我的身体背景

function changeDivImage() {
    imgPath = document.body.style.backgroundImage;
    if (imgPath == "url(images/bg.jpg)" || imgPath == "") {
        document.body.style.backgroundImage = "url(images/bg_2.jpg)";
    } else {
        document.body.style.backgroundImage = "url(images/bg.jpg)";
    }
}

我通过以下链接激活它：

<a href="#" onclick="changeDivImage()">change</a>

我的问题是，它在IE和firefox中运行良好，但在chrome中，链接工作两次，然后停止工作，它基本上切换到bg_2.jpg，然后再次单击切换回bg.jpg，然后再也不工作了：/

还有，有没有更简单的方法来实现这一点？也许只有css？基本上我有两个身体背景图片，我想能够点击链接切换1，然后再次点击切换2，然后返回1，等等

---

最后，如何使这两个背景淡入淡出？而不是在两者之间切换

有一种更干净的方法可以做到这一点。作为演示，请参见：

<button id="toggle" type="button">Toggle Background Color</button>

var togglebg = (function(){
    var bgs = ['black','blue','red','green'];

    return function(){
        document.body.style.backgroundColor = bgs[0];
        bgs.push(bgs.shift());
    }
})();

document.getElementById('toggle').onclick = togglebg;

下面是一个使用真实图像的示例：

jQuery(document).ready(function ($) {
    var togglebg = (function () {
        var bgs = [
                '000/ffffff&text=Black and White',
                '0000ff/ffffff&text=Blue and White',
                'ffff00/000&text=Yellow and Black',
                'ff0000/00ff00&text=Red and Green'
            ],
            url = "url('http://dummyimage.com/600x400/{img}')";

        return function () {
            document.body.style.backgroundImage = url.replace('{img}', bgs[0]);
            bgs.push(bgs.shift());
        }
    })();

    $('#toggle').on('click', togglebg);
});

使用CSS类

CSS规则

body { background-image: url(images/bg.jpg); }
body.on { background-image: url(images/bg_2.jpg); }

JavaScript:

function changeDivImage() {
    $("body").toggleClass("on");
}

<div id="bg">
    <div id="bg-top"></div>
    <div id="bg-bottom"></div>
</div>
<a id="bg-changer" href="#">change</a>

div#bg, div#bg-top, div#bg-bottom
{
    display: block;
    position: fixed;
    width: 100%;
    /*height: 500px;*/ /* height is set by javascript on every window resize */
    overflow: hidden;
}
div#bg 
{
    z-index: -99;
}

var m = 0, 
/* Array of background images. You can add more to it. */
imgs = ["images/bg.jpg", "images/bg_2.jpg"];

/* Toggles the background images with cross-fade effect. */
function changeDivImage()
{
    setBgHeight();
    var imgTop = imgs[m];
    m = (m + 1) % imgs.length;
    var imgBottom = imgs[m];
    $('div#bg')
        .children('#bg-top').show()
        .css('background-image', 'url(' + imgTop + ')')
        .fadeOut('slow')
        .end()
        .children('#bg-bottom').hide()
        .css('background-image', 'url(' + imgBottom + ')')
        .fadeIn('slow');
}

/* Sets the background div height to (fit the) window height. */
function setBgHeight()
{
    var h = $(window).height();
    $('div#bg').height(h).children().height(h);
}

/* DOM ready event handler. */
$(document).ready(function(event)
{
    $('a#bg-changer').click(function(event) { changeDivImage(); });
    changeDivImage(); //fade in the first image when the DOM is ready.
});

/* Window resize event handler. */
$(window).resize(function(event)
{
    setBgHeight(); //set the background height everytime.
});

如果你想淡出，你将不得不淡出整个页面。使用可以使用jQuery的

fadeIn

和

fadeOut

以下是您的解决方案： （这也支持其他图像）

这是

这是

更新：交叉衰落版本

这是

您不希望整个页面（包含所有元素）淡入/淡出。只有背景应该消失。因此，这个版本有一个div用作背景容器。其z-depth的排列方式使其自身保持在页面最底部的元素；并在两个子对象之间切换以创建交叉淡入效果

HTML:

function changeDivImage() {
    $("body").toggleClass("on");
}

<div id="bg">
    <div id="bg-top"></div>
    <div id="bg-bottom"></div>
</div>
<a id="bg-changer" href="#">change</a>

div#bg, div#bg-top, div#bg-bottom
{
    display: block;
    position: fixed;
    width: 100%;
    /*height: 500px;*/ /* height is set by javascript on every window resize */
    overflow: hidden;
}
div#bg 
{
    z-index: -99;
}

var m = 0, 
/* Array of background images. You can add more to it. */
imgs = ["images/bg.jpg", "images/bg_2.jpg"];

/* Toggles the background images with cross-fade effect. */
function changeDivImage()
{
    setBgHeight();
    var imgTop = imgs[m];
    m = (m + 1) % imgs.length;
    var imgBottom = imgs[m];
    $('div#bg')
        .children('#bg-top').show()
        .css('background-image', 'url(' + imgTop + ')')
        .fadeOut('slow')
        .end()
        .children('#bg-bottom').hide()
        .css('background-image', 'url(' + imgBottom + ')')
        .fadeIn('slow');
}

/* Sets the background div height to (fit the) window height. */
function setBgHeight()
{
    var h = $(window).height();
    $('div#bg').height(h).children().height(h);
}

/* DOM ready event handler. */
$(document).ready(function(event)
{
    $('a#bg-changer').click(function(event) { changeDivImage(); });
    changeDivImage(); //fade in the first image when the DOM is ready.
});

/* Window resize event handler. */
$(window).resize(function(event)
{
    setBgHeight(); //set the background height everytime.
});

Javascript（jQuery）：

function changeDivImage() {
    $("body").toggleClass("on");
}

<div id="bg">
    <div id="bg-top"></div>
    <div id="bg-bottom"></div>
</div>
<a id="bg-changer" href="#">change</a>

div#bg, div#bg-top, div#bg-bottom
{
    display: block;
    position: fixed;
    width: 100%;
    /*height: 500px;*/ /* height is set by javascript on every window resize */
    overflow: hidden;
}
div#bg 
{
    z-index: -99;
}

var m = 0, 
/* Array of background images. You can add more to it. */
imgs = ["images/bg.jpg", "images/bg_2.jpg"];

/* Toggles the background images with cross-fade effect. */
function changeDivImage()
{
    setBgHeight();
    var imgTop = imgs[m];
    m = (m + 1) % imgs.length;
    var imgBottom = imgs[m];
    $('div#bg')
        .children('#bg-top').show()
        .css('background-image', 'url(' + imgTop + ')')
        .fadeOut('slow')
        .end()
        .children('#bg-bottom').hide()
        .css('background-image', 'url(' + imgBottom + ')')
        .fadeIn('slow');
}

/* Sets the background div height to (fit the) window height. */
function setBgHeight()
{
    var h = $(window).height();
    $('div#bg').height(h).children().height(h);
}

/* DOM ready event handler. */
$(document).ready(function(event)
{
    $('a#bg-changer').click(function(event) { changeDivImage(); });
    changeDivImage(); //fade in the first image when the DOM is ready.
});

/* Window resize event handler. */
$(window).resize(function(event)
{
    setBgHeight(); //set the background height everytime.
});

---

这可能会有更多的改进，但它会给你一个想法

旁注：你的代码中应该是

var imgPath

，除非你已经在其他地方定义了它。无论如何，我可以用它来淡入淡出图片？是的，在帖子中添加了交叉淡入淡出jQuery版本。非常感谢，我正在努力解决这个问题，将立即报告。这很好，给了我很多很棒的想法，不幸的是，没有IE支持：（我添加了css过渡：background.4s ease in out；这给了我仅用于背景的淡入/淡出效果；）在IE中实现了这一点，而不是将背景图像分配给主体，我添加了一个宽度为100%，高度为100%的环绕div，并将其应用到它！工作就像一个符咒：D