更改背景图像并在其间进行淡入淡出

Question

我正在尝试用JS更改英雄部分的背景图像。循环正在工作，但我不确定如何将一个图像淡入下一个图像。

它当前的设置方式使其在更改之间变为白色(背景色(，而不是从一张图像变为下一张图像。

var images = ["../images/winter.jpeg", "../images/spring.jpeg", "../images/summer.jpeg", "../images/welcome.jpeg"];
var index = 0;
function changeBackground() {
index = (index + 1 < images.length) ? index + 1 : 0;
$('.hero').fadeOut(0, function () {
$(this).css('background-image', 'url(' + images[index] + ')')
$(this).fadeIn(0);
});
};
var timer = null;
function startSetInterval() {
timer = setInterval(changeBackground, 2000);
}
// start function on page load
startSetInterval();
$('.link-block-animation').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval(changeBackground, 2000);
});

Answer 1

您可以做的一件事是在.hero元素上使用绝对定位。每次要更改背景时，都可以插入一个新的.hero，其中display:none位于旧的.hero之上。为了实现绝对定位，您可以添加一个具有position:relative的容器。这样，就可以确保所有.hero元素都处于完全相同的位置。所以你的html和css可能看起来像这样：

<style>
.container{
position:relative;
height:100px;
width:100px;
}
.hero{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
}
</style>
<div class="container">
<div class="hero"></div>
</div>

现在，使用javascript，您可以向容器中添加一个.hero，它将显示在顶部。由于我们希望它褪色，我们首先将display设置为none，然后将其淡入。淡入后，我们可以删除旧的.hero。类似这样的东西：

var index = 0;
$('.hero').css('background-image', 'url(' + images[index] + ')');
function changeBackground() {
var oldHero = $('.hero');
var newHero = $('<div class="hero"></div>');
index = (index + 1 < images.length) ? index + 1 : 0;
newHero.css('display','none');
newHero.css('background-image', 'url(' + images[index] + ')');
$('.container').append(newHero);
newHero.fadeIn(1000,function(){
oldHero.remove();
});
};

这接近你的需求吗？