setInterval-在每個回圈的第一個元素上等待更長時間

我有一個正在使用的影像幻燈片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 秒？

uj5u.com熱心網友回復：

您可以為此使用 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>

uj5u.com熱心網友回復：

您不能通過這種方式更改間隔。它重復呼叫一個函式或執行一個代碼片段，每次呼叫之間有固定的時間延遲。更新您必須清除的間隔并使用新的延遲時間創建新的間隔，如下例所示。但我認為您可能不得不嘗試使用 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);

標籤：javascript for循环 设置间隔

上一篇：將最后一列加1的For回圈模式

下一篇：如何使用for回圈制作一個每5個計數加5的系列？