时间戳

首页 > 解决方案 > 幻灯片不会重复使用 SetTimeout 功能

javascript - 幻灯片不会重复使用 SetTimeout 功能

问题描述

我现在正在开发这个任务，我非常想实现一个幻灯片。一旦我实现了我的javascript函数，幻灯片就会在我设置的时间内运行，但是一旦运行了4张图像，幻灯片就会消失。知道发生了什么吗？

<div class="slide-container">
    <div>
    <img class="effect slide" src="images/12apostles.jpg" >
    <img class="effect slide" src="images/bay-melbourne.jpg">
    <img class="effect slide" src="images/marina-hotel.jpg">
    <img class="effect slide" src="images/pool-marina.jpg">
    
    </div>
  </div>


  <div class="dot-container">
    <span></span>
    <span></span>
    <span></span>
    <span></span>

  </div>
  <main>
  <script>
    var index=0;
    show();
    function show () {
    var i;
    var slides=document.getElementsByClassName("slide");
    var dots=document.getElementsByTagName("span");
    for(i=0;i<slides.length;i++) {
        slides[i].style.display="none";
    }   
        

    index= index+1;
    if(index>slides.lenght){
        index=1;
    for(i=0;i<dots.length;i++){
        dots[i].className=dots[i].className.replace(" active", "");

    }
    }
    slides[index-1].style.display = "block";
    dots[index-1].className+="active";
    setTimeout(show, 1500); 

}
</script>

谢谢

标签： javascriptcss

解决方案

 var index = 0;
 show();

 function show() {
    var i;
    var slides = document.getElementsByClassName("slide");
    var dots = document.getElementsByTagName("span");
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }


    index = index + 1;
    if (index > slides.length) {
        index = 1;
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");

        }
    }
    slides[index - 1].style.display = "block";
    dots[index - 1].className += "active";
    setTimeout(show, 1500);

 }

前：

if (index > slides.lenght) {} 该行出错

后：

修复：如果（索引 > slides.length）{}

像魅力一样工作

推荐阅读