JQuery

Question

我尝试实现幻灯片放映。它工作得很好，但在淡出图像重叠时。

你能告诉我为什么吗？

$(function(){
$('.img0 img:gt(0)').hide();
setInterval(function(){
  $('.img0 :first-child').fadeOut()
     .next('img').fadeIn()
     .end().appendTo('.img0');}, 
  3000);
});

Answer 1

我快速试用了你的 JSFiddle，并且由于你在图像上指定了宽度和高度，所以你可以使图像绝对定位，以便它们彼此重叠。

.img0{margin-bottom: 40px; text-align:center; float:center; margin-bottom:20px; position: relative; width: 320px; height: 240px; } .img0 img { width: 80%; height: auto; position: absolute; top: 0; left: 0; }

看这里：

JSFiddle

Answer 2

您需要等待淡出完成。您可以使用 fadeOut 的回调功能。见以下代码：

$(document).ready(function () {

    $(function () {
        $('.img0 img:gt(0)').hide();
        setInterval(function () {
                $('.img0 :first-child').fadeOut("slow", function (e) {
                        $('.img0 :first-child').next('img').fadeIn().end().appendTo('.img0');
                    }
                )
            },
            3000
        );
    });
})
;

JQuery - 幻灯片重叠

JQuery - Slideshow overlaps

html

css

slideshow