在表格中旋转图像

Question

在表格中旋转图像

3

我正在尝试使用在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>

- Dan W

我认为你实际上不能将 div 嵌套在表格单元格内。此外，通过以 /> 结束来关闭您的图像标签。当您将图像插入其中时，您的单元格应自动缩放。另外，为什么您的 CSS 中有 width: 100%px，如果您确定了 div 的 width 和 height，它可能无法正确缩放，因为它的值是由单元格大小而不是其中的图像决定的。 - somethinghere

@somethinghere：我不明白你的意思。(1) 实际上，您可以在表格单元格中嵌套 div。 (Ref) 声明允许使用流内容，并且 (根据此) div 是流内容。(2) 没有必要关闭图像标记。(请看这里)。 - Abhitalks

@Abhitalks：“没有必要关闭图像标签” - 什么？我们回到1999年了吗？来吧，这是基础。是的，_没有必要_，一切都能正常工作，但这只是被接受的标准和语义，达成共识从来不会有坏处。我已经因为SO文章的发布而同意第一个观点，所以我不明白你再次提出这个观点的意义。 - somethinghere

@somethinghere: (1) "..这只是被接受的标准.." -- 是的，标准规定不需要闭合。 (2) 我接受我在发表评论之前没有阅读你的评论。那确实是我的错误再次提出这个问题。 - Abhitalks

@Abhitalks 你知道吗？无论如何。似乎有一种固执地关注那些“建议和想法”的部分，而不是涉及问题的部分。 - somethinghere

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Stewartside · Accepted Answer

我认为您的问题可能是由于短暂时间内，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>