图像之间有延迟的Javascript幻灯片

Question

我有以下代码来显示幻灯片。它工作正常，但我希望发生的是让第一张图片淡出，延迟一秒或两秒，然后让下一张图片淡入。我现在有两张图片，但会完成后有多个图像。现在刚做了 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>

如有任何想法或想法，我们将不胜感激。

谢谢

Answer 1

使用.delay(7000)在链中。它设置一个计时器来延迟队列中后续项目的执行。

这里 7000ms 会给你 2 秒的延迟，因为你的图像在 5000ms 后淡出。

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

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

#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
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slideshow">
  <div>
    <img src="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg" width="240" height="240">
  </div>
  <div class="myslides">
    <img src="https://www.w3schools.com/howto/img_fjords.jpg" width="240" height="240">
  </div>
</div>