褪色的图像进出混乱行内块风格div

我有一个图像的网格，我希望他们每个人随机淡入和淡出。我有gridview，我也有用于淡入淡出图像的JS代码。但是，当我在图像网格上实现JS代码时，它无法按预期工作。褪色的图像进出混乱行内块风格div

当图像加载时，div的大小被改变，整个网格div被展开。

这里是我的意思是：http://jsfiddle.net/5wkcsnv5/10/

我怎样才能解决这个问题？谢谢！

<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>

来源

2014-09-29 Harry

这个问题比看起来有点棘手。你对图像有多少控制，具体是宽高比。如果您的图像尺寸和宽高比不同，网格结构会变得有些复杂。 – 2014-09-29 16:31:10

我拥有完整的控制权，所有图像的大小相同 – Harry 2014-09-29 16:32:19

但是，您确实需要在网格中有一些响应，否则您将在px中指定宽度而不是％。 – 2014-09-29 16:34:19

这是一个解决问题的方法。

修改你的CSS如下：

#grid { 
    width: 475px; 
    margin: 1em auto; 
} 
#grid div { 
    display: inline-block; 
    width:30%; 
    height: 13.25vw; 
    margin: 0.5em 0; 
    padding:0; 
    border: 1px dotted blue; 
    vertical-align: top; 
    overflow: hidden; 
} 
#grid div p { 
    text-align: center; 
    margin:0; 
    padding:0; 
} 
#grid div p:first-child { 
    font-weight: bold; 
}

设定与您的缩略图的纵横比的高度#grid div。

我使用height: 13.25vw，以便高度基于包含块（视口）的初始的宽度，因此您可以在设计中保持一定的响应度。

您可能需要对此进行一些额外的关注。最后使用overflow: hidden。

此构造将第一个内嵌块元素保留为固定大小，而不管其中如何保存多个图像元素。

动画受内嵌块的变化高度影响，根据显示或隐藏的图像（即显示块设置为格）而发生变化。

观看演示：http://jsfiddle.net/audetwebdesign/6wey831p/

否则，你的HTML和jQuery做工精细原样。

来源

2014-09-29 15:55:21

这是我看到这个问题的最好看的解决方案 – tylerlindell 2014-10-01 14:56:06

我想你想是这样的Fiddle ..

跑单：

setInterval(function() { 
 
    // Fade out the first element and fade in the next and then move the elements 
 
    $('.fadein :first-child').fadeOut(1000, function() { 
 
     $(this).next('img').fadeIn(1000) 
 
     $(this).appendTo('.fadein'); 
 
     $(this).remove(); 
 
    }); 
 
    }, 
 
    1000);

多次Fiddle：

setInterval(function() { 
 
    // Fade out the first element and fade in the next and then move the elements 
 

 
    $('.fadein :first-child').fadeOut(1000, function() { 
 
     $(this).next('img').fadeIn(1000) 
 
     $(".fadein").append($(this).clone()); 
 
     $(this).remove(); 
 
    }); 
 
    }, 
 
    1000);

来源

2014-09-29 15:49:17

这确实有帮助，但是如何在图像遍历全部三个图像后环绕它？ – Harry 2014-09-29 15:54:03

更新了我的答案..干杯 – 2014-09-30 08:58:23

尝试在$('.fadein :first-child').hide()使用hide()代替fadeOut();DEMO

来源

2014-09-30 10:41:09 WisdmLabs

褪色的图像进出混乱行内块风格div

回答

相关问题