Javascript JS平滑地交换图像

我已经有了一个交换图像的功能，但是它们在没有任何动画的情况下交换。现在，我想要一个功能，巫婆交换图像与淡入淡出。以下是我为swap函数编写的代码：

var header = new Array();
header[0] = "images/lan/IMG_2799.jpg";
header[1] = "images/lan/IMG_2816.jpg";


var x = 0;

function swapHeader() {
    document.getElementById("header").style.backgroundImage = "url(" + header[x] + ")";
    if (x < header.length - 1) x++; else x = 0;
    setTimeout("swapHeader()", 5000);
}
window.onload=swapHeader;

var头=新数组（）；
标题[0]=“images/lan/IMG_2799.jpg”；
标题[1]=“images/lan/IMG_2816.jpg”；
var x=0；
函数swapHeader（）{
document.getElementById（“header”）.style.backgroundImage=“url”（“+header[x]+”）”；
如果（x

您可能需要使用两个元素，每个图像一个元素。然后，慢慢增加和减少顶部的不透明度（CSS属性）。其余内容应位于这两个元素之上，并具有透明的背景。

您只能在两个图像之间淡入，因此背景图像将永远无法工作，请尝试使用包含两个绝对定位的

img

元素的div，并在它们之间淡入-将隐藏的

img

元素的图像更改为“下一个”图像。