Question

我正在尝试使用我在jsFiddle上找到的图像推子旋转器。我在表格中包含图像时遇到问题，因为图像始终与表格边框重叠。有没有办法确保表高度与图像的高度相同（我的表使用百分比定义）。这是代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我相信你的问题可能来自于这样一个事实：在很短的时间内，有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>

在表格中旋转图像

1 个答案: