[JavaScript]簡単なスライドショー

はじめに

この記事ではJavaScriptを使用して、簡単なスライドショーを作成します。
以下の仕様とします。

• 表示される画像は常に1枚
• 用意した5枚の画像をボタンを押すたびに切り替える
• prevボタンで1枚戻る
• nextボタンで1枚進む

今回は分かりやすくするため,index.htmlにCSSやJavaScriptも記述していきます。

viewの作成

index.html

<div class="slide">
  <div class="image_box"> <!-- ここに画像が表示されます -->
    <img src="slide1.png" id="main_image">　<!-- 最初に表示される画像を記入してください -->
  </div>
  <div class="toolbar">
    <div class="nav">　<!-- スライドを操作するためのナビです -->
      <div id="prev"></div>　<!-- 表示されている画像から1枚戻ります -->
      <div id="page"></div> <!-- 現在表示されている画像が何枚目かを表示します -->
      <div id="next"></div> <!-- 表示されている画像から1枚進みます -->
    </div>
  </div>
</div>

cssの作成

CSSに関しては好みに合わせて変更してください。
また、今回はprev,nextボタンに背景画像を使用しています。

index.html

<style>
  .slide {
    margin: 0 auto;
    border: 1px solid black;
    width: 720px;
    background-color: black;
  }

  img {
    max-width: 100%;
  }

  .toolbar {
    overflow: hidden;
    text-align: center;
  }

  .nav {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 0;
  }

  #prev {
    margin-right: 0.5rem;
    width: 16px;
    height: 16px;
    background: url(arrow-left.svg) no-repeat;
  }

  #page {
    color: white;
  }

  #next {
    margin-left: 0.5rem;
    width: 16px;
    height: 16px;
    background: url(arrow-right.svg) no-repeat;
  }
</style>

ここまでで以下のようになります。
このままでは、画像の切り替えができないため、JavaScriptで画像を切り替えられるようにしていきます。

JavaScriptの作成

index.html

  <script>
    'use strict'
    // 全ての画像を定数imagesに代入します
    const images = ['slide1.png', 'slide2.png', 'slide3.png', 'slide4.png', 'slide5.png'];
    // 全ての画像に対してpreloadImageを呼び出します
    images.forEach(function (item, index) {
      preloadImage(item);
    });
    // 変数currentに現在表示されている画僧のindex番号を保存します
    let current = 0;
    // 押されたボタンに応じて1,または-1をnumとして渡します
    function changeImage(num) {
      // 表示する画像があるのか調べます
      if (current + num >= 0 && current + num < images.length) {
        // 現在表示されている画像のindex番号に1,または-1を足します
        current += num;
        // currentの数字に応じた画像をimagesから取り出して表示を切り替えます
        document.getElementById('main_image').src = images[current];
        // 現在の表示画像番号も切り替えます
        pageNum();
      }
    };
    // 最初に全ての画像を読み込みます
    function preloadImage(path) {
      let imgTag = document.createElement('img');
      imgTag.src = path;
    }
    // 現在の表示されている画像番号を表示します
    function pageNum() {
      document.getElementById('page').textContent = `${current + 1} / ${images.length}`
    };

    pageNum();
    // prevボタンが押された場合1つ前の画像に戻るよう引数に-1を渡します
    document.getElementById('prev').onclick = function () {
      changeImage(-1);
    };
    // nextボタンが押された場合1つ先の画像に進むよう引数に1を渡します
    document.getElementById('next').onclick = function () {
      changeImage(1);
    };
  </script>

プリロード

上記のpreloadImageにて先に画像を読み込んでいますが、もしこれを省くと表示を切り替えるたびに画像を読み込むこととなり、場合によっては切り替えボタンを押してから読み込みまでの間に待ち時間が発生する可能性があります。
それを防ぐため先に読み込むことで、スムーズに切り替えが行えるようにしています。
これをプリロードといいます。

これでボタンで画像が切り替わり、それに応じて表示画像の番号も変わるようになったかと思います。

おわり

最後まで読んでいただき、ありがとうございました。