Javascript 淡入/淡出图像会扩展周围图像的栅格视图_Javascript_Jquery_Html_Image

Javascript 淡入/淡出图像会扩展周围图像的栅格视图

javascript jquery html image

Javascript 淡入/淡出图像会扩展周围图像的栅格视图,javascript,jquery,html,image,Javascript,Jquery,Html,Image,我有一个网格的图像，我计划让他们都淡入淡出随机图像。当不是使用内联块的网格中的时，我的淡入效果良好但当我淡入图像时，淡入的图像显示在淡出的图像下方。我想要的是淡入的那一个在淡出的那一个之后，所以有一个平稳的过渡。了解我的意思最简单的方法是这把小提琴：有什么想法吗？谢谢 <body> <div id="grid"> <div class="fadein"> <img src="http://farm3.s

我有一个网格的图像，我计划让他们都淡入淡出随机图像。当不是使用内联块的网格中的时，我的淡入效果良好
但当我淡入图像时，淡入的图像显示在淡出的图像下方。我想要的是淡入的那一个在淡出的那一个之后，所以有一个平稳的过渡。了解我的意思最简单的方法是这把小提琴：
有什么想法吗？谢谢

<body> <div id="grid"> <div class="fadein"> <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" style="width: 100%"> <img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" style="width:100%" "> <img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg " style="width:100% ""> </div> <div> <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" style="width: 100%;"> </div> <div> <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" style="width: 100%;"> </div> <div> <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" style="width: 100%;"> </div> <div> <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" style="width: 100%;"> </div> <div> <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" style="width: 100%;"> </div> <div> <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" style="width: 100%;"> </div> <div> <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" style="width: 100%;"> </div> <div> <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" style="width: 100%;"> </div> <div> </body>

JavaScript

$('.fadein img:gt(0)').hide(); $(function () { var nImages = $(".fadein").children().length; var currentImage = 0; console.log(nImages); setInterval(function () { var randomnumber = Math.floor(Math.random() * nImages); randomnumber -= 1; if (currentImage == randomnumber) randomnumber = (randomnumber < nImages) ? randomnumber + 1 : 0; currentImage = randomnumber; $('.fadein img').fadeOut(1000); $('.fadein > img:eq(' + randomnumber + ')').fadeIn(1000); }, 3000); });

$（'.fadein img:gt（0）'）.hide（）； $（函数（）{ var nImages=$（“.fadein”）.children（）.length； var currentImage=0；控制台日志（nImages）； setInterval（函数（）{ var randomnumber=Math.floor（Math.random（）*nImages）；随机数-=1；如果（currentImage==randomnumber）randomnumber=（randomnumberimg:eq（'+randomnumber+'））.fadein（1000）； }, 3000); });
如果关闭javascript，您就会知道问题出在哪里，图像会垂直堆叠。要获取所需内容，请对包含的div使用
position:relative
和
position:absolute
以使图像彼此折叠，然后使用
z-index
以获取首先显示的第一个图像。其中一个问题是图像高度musf是固定的，因为您还需要在containig div上设置它（或者您可以使用jquery，请参阅更新）
CSS:

更新

$('.fadein img:gt(0)').hide(); $(function () { var nImages = $(".fadein").children().length; var currentImage = 0; console.log(nImages); setInterval(function () { var randomnumber = Math.floor(Math.random() * nImages); randomnumber -= 1; if (currentImage == randomnumber) randomnumber = (randomnumber < nImages) ? randomnumber + 1 : 0; currentImage = randomnumber; $('.fadein img').fadeOut(1000); $('.fadein > img:eq(' + randomnumber + ')').fadeIn(1000); }, 3000); });
由于您已经在使用jquery，因此可以使用它来设置父div的高度

$('.fadein').css('height', $('.fadein img:first-child').css('height'));

看起来不错。另外，jQuery代码是实心的。幸运的是，我确实知道图像的高度。谢谢你的帮助！