全屏動畫背景

我想創建一個具有緩慢淡入淡出效果的全尺寸背景動畫。到目前爲止，我有這個：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();;

此外，淡入淡出效果不以工作我希望它真的有效。不要在新的背景中淡入淡出，然後去掉前一個，而是在同一時間淡入淡出，這意味着如果你知道我的意思，那麼就有沒有背景或幾乎不可見的時刻。所以基本上我需要在這個代碼修改爲：

變化的代碼稍微去除改變幻燈片之間的差距，所以它消失的，然後刪除以前的背景下，不能同時在同一時間
這將是一個背景，而不是圖像，所以也許有更好的方式來應用這個，可能以某種方式使用唯一。我不想影響將在本頁稍後放置的任何其他項目。

預先感謝您

來源

2013-06-27 Piotr Ciszewski

我知道是不是你'這個問題，但你有這個腳本，我用我所有的項目時，我需要背景ful l尺寸響應，它很容易配置：http://buildinternet.com/project/supersized/ – artSx

這裏是一個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();

來源

2013-06-27 10:08:46 yeyene

這很好用謝謝。讓我把它實現到我的項目中，看看它是如何發展的。非常感謝@yeyene –

希望它能與您的項目一起工作。 – yeyene

它實際上運行良好，但有一個問題。一開始我有一個普通的黑色背景。我如何填寫第一張圖片？當您將時間設置爲1000時不可見，但如果您在第一個背景出現之前等待了7秒鐘，則該時間不可見。如何克服這一點。這就是我的意思：http://jsfiddle.net/tucado/RnqQL/216/ –

我建議你想使用jQuery插件

here is a cycle2 demo

來源

2013-06-27 10:14:24

全屏動畫背景

回答

相關問題