javascriptのスライドショー #JavaScript

js理解を深めるためのスライドショー

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>myself</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<main>
    <img>
</main>

<nav>
    <ul>
    <li id="play">Play</li>
    <li id="pause" class="hidden">Pause</li>
     <li id="prev">&lt;</li>
    <li id="next">&gt;</li>
    </ul>
</nav>

<ul class="thumbnails"></ul>
</div>
<script src="main.js"></script>
</body>
</html>

style.css

.container {
    width: 300px;
    margin: 0 auto;
  }

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

  main {
    margin-bottom: 8px;
  }

  main img {
    width: 300px;
    height: 200px;
    vertical-align: bottom;
  }

  nav {
    margin-bottom: 8px;
  }

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

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

  nav li:hover {
    background: #f8f8f8;
  }

  #play, #pause {
    width: 140px;
  }

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

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

  .thumbnails li:hover {
    opacity: 1;
  }

  .thumbnails li.current {
    opacity: 1;
  }

  .thumbnails img {
    width: 56px;
    vertical-align: bottom;
    display:none;
  }

  .hidden{
    display:none;
  }

main.js

'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 currentNum = 0;

function setMainImage(image){
 document.querySelector('main img').src = image;
}
　//一番上の画像を表示
　setMainImage(images[currentNum]);

function removeCurrentClass() {
  document.querySelectorAll('.thumbnails li')[currentNum]
    .classList.remove('current');
}

function addCurrentClass() {
  document.querySelectorAll('.thumbnails li')[currentNum]
    .classList.add('current');
}

//下の現在の画像にopacityを追加する
const thumbnails = document.querySelector('.thumbnails');
images.forEach((image,index) =>{
    //console.log(image,index);
    const li=document.createElement('li');
    if(index === currentNum){
    //img.style.add(current);
    // img.appendChild(current);
    li.classList.add('current');
    }

  //imgをクリックしたら、その画像が上の画像に反映される
  li.addEventListener('click',() =>{
  setMainImage(image);
});


    //下の画像を表示させる
    const img=document.createElement('img');
    img.src=image;
    li.appendChild(img);
    thumbnails.appendChild(li);
});

//nextをクリックしたら下と上の画像が一つうごく
const next=document.getElementById('next');
next.addEventListener('click',()=>{
//image.move
removeCurrentClass();
currentNum++;
if(currentNum === images.length){
  currentNum = 0;
}
addCurrentClass();
setMainImage(images[currentNum]);
// setMainImageは一つ動かす処理をする関数
});

//prevをクリックしたら、currentNumを一つ戻す
const prev = document.getElementById('prev');
  prev.addEventListener('click',()=>{
removeCurrentClass();
currentNum--;
if(currentNum < 0){
  currentNum = images.length - 1;
}
addCurrentClass();
setMainImage(images[currentNum]);

  });
  let timeoutId;

  function playSlideshow(){
    timeoutId = setTimeout(()=>{
    next.click();
    playSlideshow();
    },1000);
  }


  //playを押すと画像がループする
  const play= document.getElementById('play');
  const pause= document.getElementById('pause');

  play.addEventListener('click',()=>{
    play.classList.add('hidden');
    pause.classList.remove('hidden');
    playSlideshow();
    });


  //pauseを押すと、ループしてたのが止まる
  pause.addEventListener('click',()=>{
    play.classList.remove('hidden');
    pause.classList.add('hidden');
    clearTimeout(timeoutId);
  });
}