Javascript - 在计时器上更改幻灯片的 div 内容，导致所有元素被覆盖

Question

我有一个幻灯片，但想定期更改幻灯片的内容。

基于来自许多网站的相当标准的 jQuery/CSS3，在本地主机上运行，​​我有...

    <script>
        $(function() {
            $("#slideshow > div:gt(0)").hide();
            var changeSlide = setInterval(function() {
              $('#slideshow > div:first')
                .fadeOut(500)
                .next()
                .fadeIn(500)
                .end()
                .appendTo('#slideshow');
            }, 2000);

            var reLoadMyData = setInterval(function() {
                $("#slideshow").load("data.xml");
            },5000);
        });
    </script>

重新加载后，所有(新)div 都相互重叠。然而，每 2 秒就会有一个消失——只是它们进入了一个糟糕的状态。

• 如何解决重叠问题？我在加载 data.xml 之前/之后尝试过 $("#slideshow > div:gt(0)").hide();，并尝试删除#slideshow 的所有子元素，但是这没有效果。
• 有没有一种方法可以在 div 的“末尾”加载()，而不需要第二个间隔(这真的有点乱)？

Answer 1

如前所述，对于覆盖问题，问题在于加载完成后您没有再次隐藏新的 div。为此，您需要在 load() 函数中添加隐藏操作。

$("#slideshow").load("data.xml", function(){
     // On load complete, do stuff
     $("#slideshow > div:gt(0)").hide();
});

此外，您可能希望使用以下内容作为引用 https://api.jquery.com/load/并将参数添加为 responseText、textStatus，以验证您的加载是否成功并仅在调用成功时隐藏 div，如果失败则显示消息

很抱歉在我之前的回答中误解了这个问题