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

I am trying to put a play button in my image gallery

本文关键字：一个 按钮 播放 我的 图片库      更新时间：2023-09-26

我正试图在我的图像库中放置一个播放按钮。我有一小部分代码需要处理，但我的问题是让图像一次显示一个。下面的代码一次显示所有的图片。我想知道的是，我是否可以通过类名来处理这个问题，或者我是否需要构建一个数组并以此为基础进行处理。这是部分工作的代码，同时显示所有内容。我想我只是错过了一些简单的东西。

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

尝试使用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数字，您可以获得不同的渐变效果。查看此代码笔以查看它的运行情况。

您可以稍微更改您的函数，使其等待动画完成：

<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>
相关文章：