Question

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

<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

尝试使用setTimeout延迟移动并添加一些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以查看其实际效果。

我想在我的图库中放一个播放按钮

2 个答案: