Question

我想创建一个具有慢淡化效果的全尺寸背景动画。到目前为止，我有这个：jsfiddle

HTML：

<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" />

的CSS：

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

JS：

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

此外，淡入淡出效果不能以我希望它真正起作用的方式起作用。它不会在新的背景中消失，然后移除前一个背景，它会在同一时间淡入淡出，这意味着有一个没有背景的时刻或者几乎看不到它，如果你知道我的意思。基本上我需要在这段代码中修改的是：

稍微更改一下代码，以消除更改幻灯片之间的差距，使其淡入，然后删除之前的背景，而不是同时删除两个
这将是一个背景，而不是图像，所以也许有更好的方法来应用它，可能以某种方式使用一个。我不想影响将在本页后面放置的任何其他项目。

提前谢谢

Answer 1

这是一个DEMO http://jsfiddle.net/yeyene/4CHse/1/

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

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

Answer 2

我建议你假设使用jQuery插件

here is a cycle2 demo

全屏动画背景

2 个答案: