More than 3 years have passed since last update.

Javascriptでスライドショーを作る方法

Posted at 2020-06-05

①HTMLでマークアップを行う

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Slideshow</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <main>
※メイン画像の領域
    <img id="main" src="img/pic00.png">

※ナビゲーション
    <nav>
      <ul>
        <li id="play">Play</li>
        <li id="prev">&lt;</li>
        <li id="next">&gt;</li>
      </ul>
    </nav>

※サムネイル
    <ul class="thumbnails">
※currentクラスを付いた場合には、色が濃くなるようにする。
      <li class="current"><img src="img/pic00.png"></li>
      <li><img src="img/pic01.png"></li>
      <li><img src="img/pic02.png"></li>
      <li><img src="img/pic03.png"></li>
      <li><img src="img/pic04.png"></li>
      <li><img src="img/pic05.png"></li>
      <li><img src="img/pic06.png"></li>
      <li><img src="img/pic07.png"></li>
    </ul>
  </main>

  <script src="js/main.js"></script>
</body>
</html>

②CSSでスタイリングを行う

main {
  width: 300px;
  margin: 0 auto;
}

img {
  vertical-align: bottom;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#main {
  width: 300px;
  height: 200px;
  margin-bottom: 8px;
}

nav {
  margin-bottom: 8px;
}

nav ul {
  display: flex;
  justify-content: space-between;
}

nav li {
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
  padding: 4px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

nav li:hover {
  background: #f8f8f8;
}

#play {
  width: 140px;
}

#next,
#prev {
  width: 60px;
}

.thumbnails {
  display: grid;
  grid-template-columns: repeat(5, 56px);
  gap: 5px;
}

.thumbnails li {
  cursor: pointer;
  opacity: 0.4;
}

.thumbnails li:hover,
.thumbnails li.current {
  opacity: 1;
}

.thumbnails img {
  width: 56px;
}

③次にJavascriptでメイン画像を生成していきます。


①写真のリストを配列として保持

  const images = [
    'img/pic00.png',
    'img/pic01.png',
    'img/pic02.png',
    'img/pic03.png',
    'img/pic04.png',
    'img/pic05.png',
    'img/pic06.png',
    'img/pic07.png',
  ];

④HTMLで見やすいようにマークアップしてメインの画像とサムネイルの画像を
javascriptで生成するために、削除する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Slideshow</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <main>
※メイン画像の領域の画像部分削除
    <img id="main">

※ナビゲーション
    <nav>
      <ul>
        <li id="play">Play</li>
        <li id="prev">&lt;</li>
        <li id="next">&gt;</li>
      </ul>
    </nav>

※サムネイルのli部分削除
    <ul class="thumbnails"></ul>
  </main>

  <script src="js/main.js"></script>
</body>
</html>

その後、javascriptでメイン画像をまずは生成


①写真のリストを配列として保持

  const images = [
    'img/pic00.png',
    'img/pic01.png',
    'img/pic02.png',
    'img/pic03.png',
    'img/pic04.png',
    'img/pic05.png',
    'img/pic06.png',
    'img/pic07.png',
  ];

②画像で今何番目を表示しているのか？を順番を保持するための
変数を用意する

let currentIndex = 0;

③メイン画像を生成するために要素の取得

 const mainImage =  document.getElementById('main');

④画像を表示する（メイン画像のsrcに、配列要素を持っているimagesの[currentIndex]を
代入する）
最初は0番目の画像が表示されている。

mainImage.src = images[currentIndex];

サムネイル画像を生成する


①配列要素の画像分だけループ処理をしたいので、forEachを使う
images.forEach(image, () => {
②html要素を生成する
const img =  document.createElement('img');
③この要素に画像を代入する
img.src = image;

※htmlとして生成したimgをli要素の子要素とする
④liのhtml要素を作る
const li =  document.createElement('li');
⑤要素を作ったらappendChildで子要素にimgをつける
li.appendChild(img);
⑤最後にul(.thumbnails)の子要素としてliを付ける
最初にul要素を取得しliを子要素化する
document.querySelector('.thumbnails').appendChild(li);

});

メインの画像と切り替える

{
  const images = [
    'img/pic00.png',
    'img/pic01.png',
    'img/pic02.png',
    'img/pic03.png',
    'img/pic04.png',
    'img/pic05.png',
    'img/pic06.png',
    'img/pic07.png',
  ];
  let currentIndex = 0;

  const mainImage = document.getElementById('main');
  mainImage.src = images[currentIndex];

①currentIndexは0なので、0番目のindexにcurrentをつける。
index番号とcurrentを紐づける

まずforEachの引数にindexをつける。forEachの引数が2つある場合は、
()を付けないといけないので注意する。
forEachの機能で引数を２つにすると、imageの何番目であるかを2番目の引数である
indexで表せることができる。
つまる、imageの1番2番と番号で表せるようになる。


  images.forEach((image, index) => {
    const img = document.createElement('img');
    img.src = image;

    const li = document.createElement('li');

②index表し方は、index === currentIndexの番号が同じになった時、
つまり、image画像の番号と変数の数字が同じになった場合は、
currentクラスが付く（opacity:1）

    if (index === currentIndex) {
      li.classList.add('current');
    }

③サムネイル画像をクリックしたら、メイン画像も一緒に変更されるように
する。
liをclickしたら、image(配列から取り出した1つの画像)がmainImage.srcに
代入される。
mainImage.src = images[currentIndex];が上書きされる。

    li.addEventListener('click', () => {
      mainImage.src = image;
    });

    li.appendChild(img);
    document.querySelector('.thumbnails').appendChild(li);
  });
}

currentクラスを移動する

'use strict';

{
  const images = [
    'img/pic00.png',
    'img/pic01.png',
    'img/pic02.png',
    'img/pic03.png',
    'img/pic04.png',
    'img/pic05.png',
    'img/pic06.png',
    'img/pic07.png',
  ];
  let currentIndex = 0;

  const mainImage = document.getElementById('main');
  mainImage.src = images[currentIndex];

  images.forEach((image, index) => {
    const img = document.createElement('img');
    img.src = image;

    const li = document.createElement('li');
    if (index === currentIndex) {
      li.classList.add('current');
    }
    li.addEventListener('click', () => {
      mainImage.src = image;

①li要素をクリックしたときに、htmlで生成したli要素を取得する。
      const thumbnails = document.querySelectorAll('.thumbnails > li');
②取得した要素のcurrentIndex番目（最初は0番目）のcurrentを外す
      thumbnails[currentIndex].classList.remove('current');
③そして、currentIndexをクリックした画像の番号に更新する。
      currentIndex = index;
④そのクリックした画像の番号にcurentを付ける
      thumbnails[currentIndex].classList.add('current');
    });

    li.appendChild(img);
    document.querySelector('.thumbnails').appendChild(li);
  });
}

「次へボタンを動作させる」

'use strict';

{
  const images = [
    'img/pic00.png',
    'img/pic01.png',
    'img/pic02.png',
    'img/pic03.png',
    'img/pic04.png',
    'img/pic05.png',
    'img/pic06.png',
    'img/pic07.png',
  ];
  let currentIndex = 0;

  const mainImage = document.getElementById('main');
  mainImage.src = images[currentIndex];

  images.forEach((image, index) => {
    const img = document.createElement('img');
    img.src = image;

    const li = document.createElement('li');
    if (index === currentIndex) {
      li.classList.add('current');
    }
    li.addEventListener('click', () => {
      mainImage.src = image;
      const thumbnails = document.querySelectorAll('.thumbnails > li');
      thumbnails[currentIndex].classList.remove('current');
      currentIndex = index;
      thumbnails[currentIndex].classList.add('current');
    });

    li.appendChild(img);
    document.querySelector('.thumbnails').appendChild(li);
  });

①次へボタンの要素を取得する
  const next = document.getElementById('next');
  next.addEventListener('click', () => {
③currentIndex(クリックされた画像)のプラス1に行く
    let target = currentIndex + 1;
④もしimagesの最後番号とtargetが同じになったら、0番目に戻る
    if (target === images.length) {
      target = 0;
    }
②li[target番目]が上記にあるclick()の要素挙動を行う
    document.querySelectorAll('.thumbnails > li')[target].click();
  });
}

「前へとplayボタン」

'use strict';

{
  const images = [
    'img/pic00.png',
    'img/pic01.png',
    'img/pic02.png',
    'img/pic03.png',
    'img/pic04.png',
    'img/pic05.png',
    'img/pic06.png',
    'img/pic07.png',
  ];
  let currentIndex = 0;

  const mainImage = document.getElementById('main');
  mainImage.src = images[currentIndex];

  images.forEach((image, index) => {
    const img = document.createElement('img');
    img.src = image;

    const li = document.createElement('li');
    if (index === currentIndex) {
      li.classList.add('current');
    }
    li.addEventListener('click', () => {
      mainImage.src = image;
      const thumbnails = document.querySelectorAll('.thumbnails > li');
      thumbnails[currentIndex].classList.remove('current');
      currentIndex = index;
      thumbnails[currentIndex].classList.add('current');
    });

    li.appendChild(img);
    document.querySelector('.thumbnails').appendChild(li);
  });

  const next = document.getElementById('next');
  next.addEventListener('click', () => {
    let target = currentIndex + 1;
    if (target === images.length) {
      target = 0;
    }
    document.querySelectorAll('.thumbnails > li')[target].click();
  });

①前へボタンの要素を取得する
  const prev = document.getElementById('prev');
  prev.addEventListener('click', () => {
②クリックした画像の1つ前をtarget番目とする
    let target = currentIndex - 1;
③もし、0よりも小さくなってしまったら、最後の画像に飛ぶようする
    if (target < 0) {
      target = images.length - 1;
    }
    document.querySelectorAll('.thumbnails > li')[target].click();
  });

⑦1000ミリ秒ごとにnext.clickを行う。
  function playSlideshow() {
    setTimeout(() => {
      next.click();
      playSlideshow();
    }, 1000);
  }

④playの要素を取得する
  const play = document.getElementById('play');
  play.addEventListener('click', () => {
⑥クリックしたらplaySlideshow()というファンクションを実行することにする。
    playSlideshow();
  });
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up