javascript - 如何制作一个在最后一张图像处停止并带有重播按钮的图像 slider

Question

如何仅使用 HTML CSS js 制作一个在最后一张图片处停止并在最后一张图片处带有重播按钮的图片 slider

$("#slideshow > div:gt(0)").hide();
setInterval(function () {
    $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
    currentPosition++;
}, 3000);

#slideshow {
    text-align: center;
    position: relative;
}
#slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
            <div>
                <img src="" alt="">
            </div>
            <div>
                <img src="" alt="">
            </div>
            <div>
                <img src="" alt="">
            </div>
        </div>

我需要在最后一张图片上停止 slider 并需要一个重播按钮。

Answer 1

试试这个。

function play() {
  $("#slideshow > div").hide();
  $('#slideshow > div:first').fadeIn(1000, function() {
    $(this).fadeOut(1000, function() {
      $(this).next().fadeIn(1000, function() {
        $(this).fadeOut(1000, function() {
          $(this).next().fadeIn(1000);
        })
      })
    })
  })

}
$("#replay").on("click", function() {
  play();
})

play();

在这里工作 -> https://jsfiddle.net/sherin81/Lu913v34/