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. これは画像ではなく背景になるので、これを適用するより良い方法があるかもしれません。このページの後半に配置される他のアイテムには影響を与えたくありません。

前もって感謝します

4

2 に答える 2

4

ここに1つのデモがあります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 に答える