全屏动画背景

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

全屏动画背景

回答

相关问题