javascript - 我正在尝试在我的图片库中放置一个播放按钮

Question

我正在尝试在我的图片库中放置一个播放按钮。我有一小段代码需要工作，但我的问题是让图像一次显示一个。下面的代码一次显示所有图片。我想知道我是否可以通过类名来工作，或者我是否需要构建一个数组并从中工作。这是部分工作同时显示的代码。我想我只是缺少一些简单的东西。

<script>
function slide_show() {
    var slides = document.getElementsByClassName("s"),
        i = slides.length;

    for(i=0; i<15;  i++) {
        slides[i].style.visibility = "visible";
        slides[i].style.transition="visibility 5s ease 5s"
    }   
}
</script>

Answer 1

你可以稍微改变你的函数，让它等待动画完成：

<script>
var index = 0;
function slide_show() {
    var slides = document.getElementsByClassName("s");

    if(index >= slides.length)
        return;

    slides[index].style.visibility = "visible";
    slides[index].style.transition = "visibility 5s ease 5s";

    setTimeout(slide_show, 10000); // Since it takes 10 seconds to finish your animation I put in 10000

    index++;
    }   
}
</script>

Answer 2

尝试使用 asetTimeout来延迟移动并添加一些opacity以使它们淡入：

var count = 0;
function slide_show() {
  var slides = document.getElementsByClassName("s"),
    i = slides.length;

  if (count < i) {
     slides[count].style.visibility = "visible";
     slides[count].style.opacity = "1";
     slides[count].style.transition="opacity 5s ease 5s"
     count++;
     setTimeout(slide_show, 500);
  }    
}
slide_show();

通过更改opacity数字或setTimout数字 - 您可以获得不同的淡入淡出效果。查看此codepen以查看它的实际效果。