Javascript 为什么Js Slideshow会跳过前两张幻灯片？

我的

Javascript

slideshow很有效，除了前两张图片显得笨重。图像“跳”进来，然后在本应淡出的时候被捕捉到。幻灯片也从最后一张图像开始，而不是第一张图像，这就是为什么我将HTML中的图像按顺序移动。代码中出现这种情况的原因是什么

Javascript：

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

    setInterval(function() { 
        $('#slideshow > div:first')
            .fadeOut(10000)
            .next()
            .fadeIn(10000)
            .end()
            .appendTo('#slideshow');
    }, 10000);
</script>

---

您只需要使用CSS将图像的位置设置为绝对位置，以便图像彼此重叠

$（“#幻灯片>div:gt（0）”）.hide（）；
setInterval（函数（）{
$（“#幻灯片>分区：第一个”）
.衰减（5000）
.next（）
法丹先生（5000）
(完)
.appendTo（“#幻灯片”）；
}, 5000);
#幻灯片>div>img{
宽度：100px；
高度：100px；
位置：绝对位置；
}
我发现，如果我添加与照片数量相同的next/fadein/end序列，我的代码将按照我需要的方式工作。在本例中，这是三个，因此在appendTo之前应该有三个next/fadein/ends

这会使过渡到下一个图像淡入淡出，而不是跳跃

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

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

正如你所建议的，我在上面添加了脚本。这有助于使它平稳一些……然而，第一张幻灯片仍然“跳跃”到下一张幻灯片，而不是慢慢褪色。我通过复制第一张幻灯片并将其用作第二张幻灯片来进行临时修复。这并不理想，但可以让它看起来不那么怪异。仍然被难住了。
#slideshow { 
    position: relative; 
    width: 100%; 
    height: 350px; 
}

#slideshow > div { 
    position: absolute;
}

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

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