setInterval

Question

我正在使用 setInterval 制作图像幻灯片。我希望它在第一个项目上保持 5 秒，然后在每次循环时在其他项目上保持 1 秒。这是我尝试过的：

let current = 0,
    delay = 5000;
    
const slides = document.querySelectorAll('.slide');
setInterval(function() {
    for (var i = 0; i < slides.length; i++) {
        slides[i].style.opacity = 0;
    }
    current = (current != slides.length - 1) ? current + 1 : 0;
    console.log(current);
    if (current === 0) {
        delay = 5000;
    } else {
        delay = 1000;
    }
    slides[current].style.opacity = 1;
}, delay);

.slider {
  width:300px;
  height:150px;
}
  .slider img {
    position: absolute;
    transition: opacity .5s ease-in;
  }
    .slider img + img {
      opacity:0;
    }

<div class="slider">
  <img class="slide" src="https://via.placeholder.com/350x150?text=Hold 5 Seconds" />
  <img class="slide" src="https://via.placeholder.com/350x150/0000FF/808080?text=Hold 1 Second" />
  <img class="slide" src="https://via.placeholder.com/350x150/FF0000/FFFFFF?text=Hold 1 Second" />
  <img class="slide" src="https://via.placeholder.com/350x150/000000/FFFFFF?text=Hold 1 Second" />
</div>

这似乎不起作用，我猜是因为一旦设置了 setInterval 延迟，就无法更改。那么我将如何做才能让第一张图片显示 5 秒，接下来的 3 张显示 1 秒，然后在第一张图片上回到 5 秒？

Answer 1

您可以为此使用 setTimeOut。我几乎保留了您的代码，以便您可以理解。

let current = 0,
    delay = 5000;
    
const slides = document.querySelectorAll('.slide');
function showNextSlide() {
  for (var i = 0; i < slides.length; i++) {
      slides[i].style.opacity = 0;
  }

  slides[current].style.opacity = 1;
  if (current === 0) {
    delay = 5000;
  } else {
    delay = 1000;
  }
  
  current = (current != slides.length - 1) ? current + 1 : 0;
  setTimeout(showNextSlide, delay);
}


showNextSlide();

.slider {
  width:300px;
  height:150px;
}
  .slider img {
    position: absolute;
    transition: opacity .5s ease-in;
  }
    .slider img + img {
      opacity:0;
    }

<div class="slider">
  <img class="slide" src="https://via.placeholder.com/350x150?text=Hold 5 Seconds" />
  <img class="slide" src="https://via.placeholder.com/350x150/0000FF/808080?text=Hold 1 Second" />
  <img class="slide" src="https://via.placeholder.com/350x150/FF0000/FFFFFF?text=Hold 1 Second" />
  <img class="slide" src="https://via.placeholder.com/350x150/000000/FFFFFF?text=Hold 1 Second" />
</div>

Answer 2

您不能通过这种方式更改间隔。它重复调用函数或执行代码片段，每次调用之间有固定的时间延迟。更新间隔，您必须清除并创建具有新延迟时间的新间隔，如下例所示。但我认为您可能不得不尝试改用 setTimeOut。

let current = 0,
delay = 5000, nIntervId = null;
    
const slides = document.querySelectorAll('.slide');

changeTheSlideItem = function(){
     for (var i = 0; i < slides.length; i++) {
        slides[i].style.opacity = 0;
    }
    current = (current != slides.length - 1) ? current + 1 : 0;
    console.log(current);
    if (current === 0) {
        delay = 5000;
    } else {
        delay = 1000;
    }
    slides[current].style.opacity = 1;
    if(nIntervId){
      clearInterval(nIntervId);
    }
    nIntervId = setInterval(changeTheSlideItem, delay);
}

nIntervId = setInterval(changeTheSlideItem, delay);

setInterval - 在每个循环的第一个元素上等待更长的时间

setInterval - wait longer on first element for each loop

javascript

for-loop