LoginSignup
0
1

More than 3 years have passed since last update.

@bluering1017(プログラミング 初心者)

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

Posted at

①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();
  });
}
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1