Question

我是JS的新手，我正在尝试使用简单的JS脚本转换body{background:;}图像。不是将div叠加在一起然后更改它们的z-index，而是想要使用CSS background-size:cover属性提出一个更简单的解决方案。使用CSS属性似乎比使用时更好地缩放背景图像（我是一个新手，我可能错了，天真）：

$(window).resize(function() {};

我的问题是，如何使用以下代码更好地在图像之间转换？我想动画过渡，但由于我没有使用堆叠div，我根本不知道如何。图片转换之间目前有空白。我试图预加载图像，但这也没有解决问题。

JavaScript：

function slideShow() {

var images = ['http://www.hdwallpapers.in/walls/fantasy_space-wide.jpg', 'http://phandroid.s3.amazonaws.com/wp-content/uploads/2014/05/rainbow-nebula.jpg']

    setInterval(function(){

        document.body.style.backgroundImage="url('"+images[0]+"')";

        var firstValue = images.shift();
        images.push(firstValue);


    }, 5000);

}

slideShow();

CSS：

body {
    background:#000 no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

非常感谢任何帮助。

Codepen：http://codepen.io/dclappert/pen/yqGob/

Answer 1

我知道你在这里提到了javascript，但是你考虑过CSS3解决方案吗？过渡提供了一种简单的方法。

这里有一个示例：http://jsfiddle.net/7eqsy2ug/可能就是您要找的...如果您想要更平滑的过渡，您也可以尝试淡化不透明度。

JavaScript替代方案是：http://rewish.github.io/jquery-bgswitcher/

来自JS Fiddle的代码使用你的JS：

body {
background:#000 no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;    
transition: background 1s ease-in-out;

}

改变身体＆＃39;使用JavaScript可以顺利地生成元素的背景图像

1 个答案: