Javascript 淡入淡出的图像弄乱了内联块样式的div
我有一个网格的图像，我想让他们每个随机淡入淡出。我有gridview，还有用于淡入淡出图像的JS代码。但是，当我在图像网格上实现JS代码时，它并没有像预期的那样工作 加载图像时，其div的大小将改变，整个网格div将展开 我的意思是： 我怎样才能解决这个问题？谢谢Javascript 淡入淡出的图像弄乱了内联块样式的div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个网格的图像，我想让他们每个随机淡入淡出。我有gridview，还有用于淡入淡出图像的JS代码。但是，当我在图像网格上实现JS代码时，它并没有像预期的那样工作 加载图像时，其div的大小将改变，整个网格div将展开 我的意思是： 我怎样才能解决这个问题？谢谢 <html> <head> <title>3x3</title> <!-- jQuery Reference --> <script src="http://co
<html>
<head>
<title>3x3</title>
<!-- jQuery Reference -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- Your Script -->
<script type='text/javascript'>
$(function(){
// Hide all images except the first within your "fade In" <div>
$('.fadein img:gt(0)').hide();
// Set an interval to occur every 3 seconds (3000ms)
setInterval(function(){
// Fade out the first element and fade in the next and then move the elements
$('.fadein :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadein');},
1000);
});
</script>
<style type="text/css">
#grid {
width: 475px;
margin: 1em auto;
}
#grid div { display: inline-block; width:30%; margin: 0.5em 0; padding:0; }
#grid div p { text-align: center; margin:0; padding:0; }
#grid div p:first-child { font-weight: bold; }
</style>
</head>
<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>
</html>
3x3
$（函数（）{
//在“淡入”中隐藏除第一张以外的所有图像
$（'.fadein img:gt（0）'）.hide（）；
//将间隔设置为每3秒发生一次（3000ms）
setInterval（函数（）{
//淡出第一个元素，淡入下一个元素，然后移动元素
$（'.fadein:first child'）.fadeOut（）
.next（'img'）.fadeIn（）
.end（）.appendTo（'.fadein'）；}，
1000);
});
#网格{
宽度：475px；
保证金：1em自动；
}
#grid div{显示：内联块；宽度：30%；边距：0.5em 0；填充：0；}
#grid div p{文本对齐：居中；边距：0；填充：0；}
#grid div p:第一个子项{font-weight:bold；}
setInterval（函数（）{
//淡出第一个元素，淡入下一个元素，然后移动元素
$（'.fadein:first child'）.fadeOut（1000，function（）{
$（this）.next（'img'）.fadeIn（1000）
$（this.appendTo（'.fadein'）；
$（this.remove（）；
});
},
1000);这里有一个解决问题的方法
按如下方式修改CSS：
#网格{
宽度：475px；
保证金：1em自动；
}
#网格分区{
显示：内联块；
宽度：30%；
高度：13.25vw；
保证金：0.5em0；
填充：0；
边框：1px点蓝色；
垂直对齐：顶部；
溢出：隐藏；
}
#网格分区p{
文本对齐：居中；
保证金：0；
填充：0；
}
#网格分区p：第一个孩子{
字体大小：粗体；
}
根据缩略图的纵横比将高度设置为#grid div
我使用了height:13.25vw
，因此高度基于初始宽度
包含块（视口），因此可以在设计中保持一定的响应性
您可能需要对此给予一些额外的注意
最后，使用overflow:hidden
此构造将第一个内联块元素保持为固定大小，而不管其大小如何
其中包含许多图像元素
动画受到内联块的可变高度的影响，这将导致
根据显示或隐藏的图像（即，显示块设置为
分区）
请参见演示：
否则，HTML和jQuery就可以正常工作。尝试在$（'.fadein:first child'）中使用hide（）
。hide（）
而不是fadeOut（）这确实有帮助，但在这三个步骤完成后，我如何使其在图像周围循环？更新了我的答案。。欢呼这个问题比表面上看起来更棘手。你对图像有多大的控制，特别是纵横比。如果您的图像大小和纵横比不同，网格结构会变得有些复杂。我可以完全控制，所有图像的大小都相同。但是，您确实需要网格中的一些响应，否则您可能会在px中指定宽度，而不是%。这是我见过的解决此问题的最佳解决方案