旋转表中的图像

我正在试验一下我在jsFiddle上找到的图像推子旋转器。由于图像总是与表格边框重叠，因此我在表格中存在包含图像的问题。有没有办法确保桌子的高度与图像的高度相同（我的桌子是用百分比定义的）。下面是代码：旋转表中的图像

$('.fadein img:gt(0)').hide(); 
 

 
setInterval(function() { 
 
    $('.fadein :first-child').fadeOut() 
 
    .next('img') 
 
    .fadeIn() 
 
    .end() 
 
    .appendTo('.fadein'); 
 
}, 4000); // 4 seconds

.fader { 
 
    position: relative; 
 
    height: 100%; 
 
    width: 100%px; 
 
} 
 
.fadein { 
 
    position: relative; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<table border="1" width=100% class="fader"> 
 
    <tr> 
 
    <td width="70%"> 
 
     <div class="fadein"> 
 

 
     <img src="http://farm9.staticflickr.com/8359/8450229021_9d660578b4_n.jpg"> 
 
     <img src="http://farm9.staticflickr.com/8510/8452880627_0e673b24d8_n.jpg"> 
 
     <img src="http://farm9.staticflickr.com/8108/8456552856_a843b7a5e1_n.jpg"> 
 
     <img src="http://farm9.staticflickr.com/8230/8457936603_f2c8f48691_n.jpg"> 
 
     <img src="http://farm9.staticflickr.com/8329/8447290659_02c4765928_n.jpg"> 
 

 
     </div> 
 
    </td> 
 
    <td>testing 123</td> 
 
    </tr> 
 
</table>

来源

2016-01-22 Dan W

我不认为你其实可以嵌套表格单元格中的'div'。另外，以'/>'结尾来关闭你的图片标签。当你插入图像时，你的单元格应该自动缩放。另外，为什么你的css的宽度是100％px，而且如果你确定div的宽度和高度，它可能无法正确缩放，因为它具有由单元大小确定的值，而不是它里面的图像。 – somethinghere

我刚把你的代码变成了一个代码片段，当你运行它时，它似乎按照需要工作。问题是什么？你看到什么问题？ – somethinghere

@somethinghere是的，你可以把div里面td http://stackoverflow.com/questions/3117454/html-w3c-valid-elements-is-div-valid-within-a-td – squaleLis

我相信你的问题可能来自一个事实，即时间量小，图像的2同时出现造成重叠问题到来。

如果你添加一些delay()你的功能，那么它应该排序你的问题。

$('.fadein img:gt(0)').hide(); 
 

 
setInterval(function() { 
 
    $('.fadein :first-child').fadeOut('500').next().delay('400').fadeIn('500').end().appendTo('.fadein'); 
 
    setTimeout(function() { 
 
    $('.fadein :first-child').css('display', 'block'); 
 
    }, 400); 
 
}, 4000);

.fader { 
 
    position: relative; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.fadein { 
 
    position: relative; 
 
    height: 100%; 
 
} 
 
.fadein img { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<table border="1" width=100% class="fader"> 
 
    <tr> 
 
    <td width="70%" class="fadein"> 
 

 
     <img src="http://farm9.staticflickr.com/8359/8450229021_9d660578b4_n.jpg"> 
 
     <img src="http://farm9.staticflickr.com/8510/8452880627_0e673b24d8_n.jpg"> 
 
     <img src="http://farm9.staticflickr.com/8108/8456552856_a843b7a5e1_n.jpg"> 
 
     <img src="http://farm9.staticflickr.com/8230/8457936603_f2c8f48691_n.jpg"> 
 
     <img src="http://farm9.staticflickr.com/8329/8447290659_02c4765928_n.jpg"> 
 

 
    </td> 
 
    <td>testing 123</td> 
 
    </tr> 
 
</table>

来源

2016-01-22 11:04:23 Stewartside

谢谢你，似乎有帮助的问题。现在唯一的问题是，图片和桌子底部边界之间有一个微小的差距。任何想法如何解决这个问题？ –

@DanW现在看到我修正的答案。它的原因是'fadeIn（）'使项目变成'inline'而不是所需的'block'。一点额外的代码，它应该按预期工作:) – Stewartside

谢谢你 –

旋转表中的图像

回答

相关问题