javascript - 在 div 之间自动切换。设置超时不工作

Question

我创建了一个包含三张幻灯片的 div，用户可以在它们之间切换但问题是我试图将其设置为自动幻灯片，但设置超时不起作用。切换按钮工作正常，我可以毫无问题地在幻灯片之间切换。这是代码

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}
function showSlides(n) {
  var i;
  var slide = document.getElementsByClassName("slide");
  if (n > slide.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slide.length}
  for (i = 0; i < slide.length; i++) {
      slide[i].style.display = "none";  
  }
  slide[slideIndex-1].style.display = "block"; 
  setTimeout(showSlides, 2000);
}

和样式表:

html , body {
  padding: 0;
  margin: 0;
  box-sizing: border-box ;
  text-align: center ;
}
/* Top */
.top {
overflow: hidden;
}
/* Navbar */
.navbar {
  display: flex ;
  flex-direction: row-reverse;
  background: transparent ;   
  align-items: center ;
  justify-content: space-between ;
  z-index: 9999;
  position : absolute ;
  width: 100%;
}
.navbar a {
  text-decoration: none ;
  color : #fff ;
  font-size: 17px;
  flex-shrink: 1 ;
  margin-top: 10px;
  margin-left: 20px;
  margin-right: 40px;
  padding: 10px;
}
.navbar a:nth-last-child(3) {
  margin-left: auto ;
}
/* slideshow */
.slideshow {
  width: 100%;
  position: relative;
}
.slide {
  padding: 100px;
  color : #fff;
}
#slide1 {
  background: url(bm2.jpg) no-repeat center center ;
  background-size: cover ;
  height: 457px;
}
#slide2 {
  background: url(bm3.jpg) no-repeat center center ;
  background-size: cover ;
  height: 457px;
}
#slide3 {
  background: url(bm1.jpg) no-repeat center center ;
  background-size: cover ;
  height: 457px;
}
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.prev {
  left : 0;
  border-radius: 3px 0 0 3px;
}

我很高兴知道我的代码有什么问题或者我在这里做错了什么

感谢您的宝贵时间。

Answer 1

如果您想每隔 n 秒定期调用某个函数，请使用函数 setInterval .您还需要调用 plusSlides() 而不是 showSlides() 来更新 slideIndex 值。

因此从 showSlides 函数中删除 setTimeout(showSlides, 2000); 行，并在代码末尾添加:

setInterval(function(){ 
    plusSlides(1); 
}, 2000);