Question

我试图创建一个播放所有图像的图像幻灯片，最后一个图像逐渐消失，再过10秒不再显示任何图像，然后在10秒后重新开始。目前我已停止在最后一张图片上，但在此之后它没有做任何事情而只是卡住了。对于如何完成这样的事情并不是那么确定所以任何和所有帮助都非常感谢！以下是JS如果需要任何其他脚本请告诉我！

var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
   // var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex >= slides){
        setTimeout(function(){ slideIndex = 1; }, 10000);
    }
    /*for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }*/
    slides[slideIndex-1].style.display = "block";
    //dots[slideIndex-1].className += " active";
    setTimeout(showSlides, 10000); // Change image every 10 seconds
}

更新： setInterval

var slideIndex = 0;
showSlides();

var myPause = setInterval(function(){ showSlides() }, 10000);

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > slides.length) {
        myPause;
        slideIndex = 1;
    }
    slides[slideIndex-1].style.display = "block";
    setTimeout(showSlides, 10000); // Change image every 10 seconds
    clearInterval(myPause);
}

Answer 1

你真的很亲近。只需使用setInterval即可。

＆＃13;

var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    for (i = 1; i < slides.length; i++) {
       slides[i].style.display = "none";
    }
    
    setInterval(function() {
      slides[slideIndex].style.display = "none";
    	slideIndex ++;
      if(slideIndex >= slides.length) {
          slideIndex = 0;
      }
      else
      {
        slides[slideIndex].style.display = "block";
      }
    }, 10000);
}

＆＃13;

img { display: block; width: 100% }

＆＃13;

<img class="mySlides" src="http://ununsplash.imgix.net/photo-1419064642531-e575728395f2?q=75" />
<img class="mySlides" src="http://ununsplash.imgix.net/photo-1417436026361-a033044d901f?q=75" />
<img class="mySlides" src="http://ununsplash.imgix.net/photo-1414502622871-b90b0bec7b1f?q=75" />

＆＃13;

Answer 2

正如BillyNate已经说过的那样，setInterval使它按照你想要的方式工作。要在中间间隔10秒钟重复播放幻灯片，您需要隐藏最后一张幻灯片，然后通过设置超时在10秒后重复播放幻灯片。

可以在最后一张幻灯片设置为display: none的位置应用动画。

var slides = document.getElementsByClassName("mySlides");

function switchSlides() {
  var slideCount = slides.length;
  var i = 0;
  
  // Set first slide visible
  slides[i].style.display = "block";
  
  // Switch slide every 10 seconds
  var switchInterval = setInterval(function() {
    i++;
    if (i < slideCount) {
      slides[i-1].style.display = "none";
      slides[i].style.display = "block";
    } else {
      clearInterval(switchInterval);

      // Hide last slide (--> fade out image)
      slides[i-1].style.display = "none";
      
      // Wait 10 seconds, then repeat switchSlides
      setTimeout(switchSlides, 10000);
    }
  }, 10000);
}

switchSlides();

.mySlides {
  display: none;
}

<img class="mySlides" src="http://unsplash.it/200?image=10">
<img class="mySlides" src="http://unsplash.it/200?image=20">
<img class="mySlides" src="http://unsplash.it/200?image=30">

JS创建计时器以隐藏图像幻灯片

2 个答案: