Question

我有一个图像网格，我打算让它们全部淡入淡出随机图像。当使用内联块在网格中不是时，我有褪色。

但是当我淡入图像时，淡入的图像会在淡出的图像下面出现。我想要的是渐渐消失的背后的，所以有一个平滑的过渡。看看我的意思最简单的方法就是这个小提琴：http://jsfiddle.net/5wkcsnv5/67/

有什么想法吗？感谢

<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); });

Answer 1

如果您关闭javascript，您就会知道问题出在何处，图像会垂直堆叠。要获得所需内容，请使用position:relative作为包含div和position:absolute以使图像相互折叠，然后使用z-index使第一张图像首先显示。一个问题是图像高度musf被固定为已知，因为你还需要在containsig div上设置它（或者你可以使用jquery，参见更新）

CSS：

#grid {
 width: 500px;
}
#grid div {
    display: inline-block;
    width:30%;
    margin: 0.5em .4em;
    padding:0;
    vertical-align: top;
    overflow: hidden;
    text-align: center;
    position:relative;
    height:100px;
}

.fadein img
{
    position:absolute;
    top:0;
    left:0;
    z-index:0;
}

.fadein img:first-child
{
    position:absolute;
    top:0;
    left:0;
    z-index:0;
}


img {
    width: 100%;   
}

.fadeSpot1 {
    width:10px;
    height:10px;
    overflow:hidden;
    background:#000;
    position:relative;
}

.fadeSpot1 img {
    display:none;
    position:absolute;
    top:0;
    left:0;
}

Fiddle

更新

由于您已经在使用jquery，因此您可以使用它来设置父div的高度

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

Updated fiddle

淡入/淡出图像可扩展其周围图像的网格视图

1 个答案: