Question

我的问题是这个幻灯片显示有重叠，我不知道为什么。第一张图像在淡出之前被第二张图像向下推。我该如何解决这个问题？我是Jquery的新手，所以任何简单的帮助都会受到赞赏。

HTML：

    <div id="slideshow" style="padding-top:10px; content-align:center">
  <div>
    <img src="https://sl.glitter-graphics.net/pub/549/549062c91it46lgr.gif">
  </div>
  <div>
    <img src="https://sl.glitter-graphics.net/pub/369/369220a3hjk9pcg9.gif">
  </div>
  <div>
    <img src="https://sl.glitter-graphics.net/pub/549/549062c91it46lgr.gif">
  </div>
  <div>
    <img src="https://sl.glitter-graphics.net/pub/369/369220a3hjk9pcg9.gif">
  </div>
  <div>
    <img src="https://sl.glitter-graphics.net/pub/549/549062c91it46lgr.gif">
  </div>
</div>

Jquery的：

  $("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)  
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  5000);

Answer 1

你的代码中的一切都是正确的，在这种情况下只使用CSS：

"Hello"

Jquery幻灯片重叠的Div

1 个答案: