JavaScriptでスライドショー

どうもこんにちはAtsu1209です。
今回はJavaScriptでスライドショーをつくる方法を書きます。

JS

//スライドショー        
const pics_src = ["img/one.png", "img/two.png", "img/three.png"];
let num = -1;
const indicators = [
  document.getElementById("spanone"),
  document.getElementById("spantwo"),
  document.getElementById("spanthree"),
];

function updateIndicators() {
  indicators.forEach((indicator, index) => {
    if (index === num) {
      indicator.style.color = "black";
    } else {
      indicator.style.color = "#808080";
    }
  });
}

function slideshow_timer() {
  if (num === 2) {
    num = 0;
  } else {
    num++;
  }
  document.getElementById("top-img").src = pics_src[num];
  updateIndicators();
}

indicators.forEach((indicator, index) => {
  indicator.addEventListener("click", function () {
    num = index;
    document.getElementById("top-img").src = pics_src[num];
    updateIndicators();
  });
});

setInterval(slideshow_timer, 6000);

・spanone,spantwo,spanthreeは、スライドショーの下の丸いやつたち(インジケーター)
・setIntervalで、表示秒数指定
・ifで、numの最大値を指定

実装例

StedTechOrganizationのHPで実装しています。