2

我想创建一个具有缓慢淡入淡出效果的全尺寸背景动画。到目前为止，我有这个：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();;

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

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

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

先感谢您

4

2 回答 2

4

这是一个演示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();
于 2013-06-27T10:08:46.947 回答
0

我建议你假设使用 jQuery 插件

这是一个cycle2演示

于 2013-06-27T10:14:24.043 回答