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