Javascript幻灯片显示图像之间的延迟

Question

我有以下代码来显示幻灯片。它工作正常，但我想要发生的是第一个图像淡出，有一秒或2的延迟，然后下一个图像淡入。我现在有2个图像，但将我完成后有多个图像。刚刚做了2次测试。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $("#slideshow > div:gt(0)").hide();

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

<style>
#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

.myslides{
    display: none
}
</style>

<div id="slideshow">
    <div>
        <img src="images/IMG_5434.JPG" width="240" height="240">
    </div>
    <div class="myslides">
        <img src="images/IMG_5435.JPG" width="240" height="240">
    </div>          
</div>

感谢任何想法或想法。

由于