我正在试验我在 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>
最佳答案
我认为您的问题可能是因为在一小段时间内同时出现了 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>
关于javascript - 旋转表格中的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34944747/