Jquery 全屏动画背景

我想创建一个带有缓慢淡入效果的全尺寸背景动画。 到目前为止，我有：

html:

js:

而且，淡入淡出的效果并没有达到我想要的效果。它不是在新的背景中淡入淡出，然后移除前一个，而是在同一时间淡入淡出，这意味着有一刻没有背景或几乎看不见，如果你知道我的意思的话。 因此，在这段代码中，我需要修改的基本内容是：

稍微更改代码，以消除更改幻灯片之间的间隙，使其淡入，然后删除以前的背景，而不是同时删除两个背景

这将是一个背景，而不是图像，所以也许有更好的方法来应用它，可能只使用一个。我不想影响稍后在此页面上放置的任何其他项目

提前感谢您

这里有一个演示

这里有一个演示

---

我建议您使用jQuery插件

---

我建议您使用jQuery插件

---

我知道这不是你的问题，但你有这个脚本，当我需要背景全尺寸响应时，我用于我的所有项目，很容易配置：我知道这不是你的问题，但你有这个脚本，当我需要背景全尺寸响应时，我用于我的所有项目，很容易配置：很好，谢谢。让我把它应用到我的项目中，看看它是如何进行的。非常感谢@YeneIt实际上效果很好，但有一个问题。一开始我有一个纯黑色的背景。如何用第一个图像填充它？将计时设置为1000时不可见，但如果设置为7秒，则在第一个背景出现之前等待该时间。如何克服这个问题。这就是我的意思：你想展示第一张图片，对吗？再次检查我的更新答案。它在JSFIDLE上看起来不错，但不幸的是，当我将时间更改为7秒延迟和3秒衰减时，在第一次img之前仍然有延迟。这是实时版本：你已经准备好在doc上添加这个了吗$（'img'）.eq（0.show（）；很好，谢谢你。让我把它应用到我的项目中，看看它是如何进行的。非常感谢@YeneIt实际上效果很好，但有一个问题。一开始我有一个纯黑色的背景。如何用第一个图像填充它？将计时设置为1000时不可见，但如果设置为7秒，则在第一个背景出现之前等待该时间。如何克服这个问题。这就是我的意思：你想展示第一张图片，对吗？再次检查我的更新答案。它在JSFIDLE上看起来不错，但不幸的是，当我将时间更改为7秒延迟和3秒衰减时，在第一次img之前仍然有延迟。这是实时版本：你已经准备好在doc上添加这个了吗$（'img'）.eq（0.show（）；

<img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-1.jpg" />
<img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-5.jpg" />
<img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-3.jpg" />

body, html{
margin:0;
padding:0;
background:black;
}
img{
position:absolute;
top:0;
display:none;
width:100%;
height:100%;
}

function test() {
$("img").each(function(index) {
    $(this).hide();
    $(this).delay(10000 * index).fadeIn(10000).fadeOut();
});
}
test();; 

$('img').hide();
$('img').eq(0).show();

function anim() {
    $("#wrap img").first().appendTo('#wrap').fadeOut(1000);
    $("#wrap img").first().fadeIn(1000);    
    setTimeout(anim, 1500);
}
anim();