更改背景图像时平滑淡入淡出

Question

这是我的代码，要查看实际效果，请看一下这个小提琴

HTML

<div id="header">
.
.
.
</div>

CSS

#header {
background: url(images/img8681.jpg);
background-size: cover;
border-bottom: 8px solid #333333;
height: 620px;
}

Javasript（jQuery）

var imgs = new Array("images/img8681.jpg","","","","");

function changeBg() {
    var imgUrl = imgs[Math.floor(Math.random()*imgs.length)];
    $('#header').css('background-image', 'url(' + imgUrl + ')');
}

setInterval(changeBg,5000);

我的问题是，如何才能平稳地更改图像而不是“仅替换”？ 以及如何避免同一图像连续出现？

Answer 1

如果使用fadeIn和fadeOut功能，则可以使图像更平滑地变化。

var imgs = new Array("img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg");
function changeBg() {
    var imgUrl = imgs[Math.floor(Math.random()*imgs.length)];
    $('#header').css('background-image', 'url(' + imgUrl + ')');
    $('#header').fadeIn(1000); //this is new, will fade in smoothly
}

function changeBackgroundSmoothly() {
    $('#header').fadeOut(1000, changeBg); //this is new, will fade out smoothly
}

setInterval(changeBackgroundSmoothly,5000);

查看此小提琴以查看结果。

关于图像的随机性，如果必须随机，则不能做很多事情。 仅仅因为随机意味着同一张图像可能连续出现两次，否则就不会完全随机，因为您可以排除一个结果。

一种解决方案可能是不随机显示图像，而是以预定义的顺序显示图像，请参考此站点的示例。

Answer 2

只是另一种方法

$("#header").fadeOut(500, //Speed
                     function () { //On fadeOut complete
                            $(this).css("background-image", "url(img2.jpg)") //Change BG
                                   .fadeIn(); //FadeIn
                     });

您可以在这里检查： https : //jsfiddle.net/rafaelaca/wwjro184/