Javascript 将PNG图像从“显示无”设置为“块”
我有大约10张图片，其中下一张与之前相同，但添加了一个元素。图像是花，第一个没有花瓣，下一个有一个，然后是两个，然后是三个。我试图在图像淡入时设置动画，以创建融合，就好像只有新花瓣淡入一样。这是我的密码Javascript 将PNG图像从“显示无”设置为“块”,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有大约10张图片，其中下一张与之前相同，但添加了一个元素。图像是花，第一个没有花瓣，下一个有一个，然后是两个，然后是三个。我试图在图像淡入时设置动画，以创建融合，就好像只有新花瓣淡入一样。这是我的密码 <!DOCTYPE html> <html> <head> <title>change picture</title> <style type="text/css"> #anim
<!DOCTYPE html>
<html>
<head>
<title>change picture</title>
<style type="text/css">
#animation img {
display: none;
-moz-animation-delay: 3.5s;
-webkit-animation-delay: 3.5s;
-o-animation-delay: 3.5s;
animation-delay: 3.5s;
}
#animation img:first-child {
display: block;
-moz-animation-delay: 3.5s;
-webkit-animation-delay: 3.5s;
-o-animation-delay: 3.5s;
animation-delay: 3.5s;
}
</style>
<script type = "text/javascript">
function startAnimation() {
var frames = document.getElementById("animation").children;
var frameCount = frames.length;
var i = 0;
setInterval(function () {
frames[i % frameCount].style.display = "none";
frames[++i % frameCount].style.display = "block";
}, 3000);
}
</script>
</head>
<body onload="startAnimation()">
<div id="animation">
<img src="logo0.png" alt="My image" />
<img src="logo1.png" alt="My image" />
<img src="logo2.png" alt="My image" />
<img src="logo3.png" alt="My image" />
<img src="logo4.png" alt="My image" />
<img src="logo5.png" alt="My image" />
<img src="logo6.png" alt="My image" />
<img src="logo7.png" alt="My image" />
<img src="logo8.png" alt="My image" />
<img src="logo9.png" alt="My image" />
<img src="logo10.png" alt="My image" />
<img src="logo_end.png" alt="My image" />
</div>
</body>
</html>
改变形象
#动画img{
显示：无；
-moz动画延迟：3.5s；
-webkit动画延迟：3.5s；
-o-动画-延迟：3.5s；
动画延迟：3.5s；
}
#动画img：第一个孩子{
显示：块；
-moz动画延迟：3.5s；
-webkit动画延迟：3.5s；
-o-动画-延迟：3.5s；
动画延迟：3.5s；
}
函数startAnimation（）{
var frames=document.getElementById（“动画”）.children；
var frameCount=frames.length；
var i=0；
setInterval（函数（）{
帧[i%frameCount].style.display=“无”；
帧[++i%frameCount].style.display=“block”；
}, 3000);
}
opacity:0opacity:1fadeIn（）fadeOut（）