ミーハー社会人のblog

こんにちは。ツーリングで旅をするのが大好きミーハーです。

今回は、JavaScriptを使って画像を切り替える制御をやってみました。

Playを押すと2秒ごとに画像が切り替わり、＜（アングル）を押すと一枚ずつ画像が切り替わります。
レブルをバックにスライドショーを作りました(o^―^o)ﾆｺ
レブルかっこいい！！

リンクは写真をクリック↓

製作の目的

JavaScript学習のため
製作実績を作るため

ターゲット

JavaScriptでできることを知りたい方
JavaScriptでのクリックイベントのやり方を知りたい方
webサイトでできることを知りたい方

製作内容

製作者の歴

プログラミング歴：1ヶ月半
JavaScript歴：3週間

使用言語

HTML
SCSS
JavaScript

作業時間

3日

難易度

★★☆☆☆☆☆☆☆☆（星２）

ドットインストールを参考に作成し、ほとんど自分で考えていないため星２にしました。

※この難易度の主観は上記プログラミング歴の私です。

コード

HTML

<div class='box'>
  <img  id="main_img">
  <div class='nav'>
    <ul id="btn">
      <li id ="play">Play</li>
      <li id ="back">&lt;</li>
      <li id ="next">&gt;</li>
    </ul>
  </div>

<ul class="pic">
</ul>
</div>

CSS

.box {
  margin: 20px auto;
  background: #fefefe;
  padding: 30px;
  border: solid 3px #aaf;
  max-width: 800px;
}

img {
  width: 100%;
  height: 100%;
  vertical-align: bottom;
}

#main_img {
  height: 500px;
}

li {
  list-style-type: none;
}

.nav li {
  border: solid 2px #ccc;
  border-radius: 5px;
  text-align: center;
  margin: 7px 0;
  padding: 3px;
  cursor: pointer;
  user-select: none;
}

.nav li:hover {
  background: #abc;
}

#btn {
  margin: 15px 0;
  display: flex;
}

#play {
  width: 50%;
  padding: 8px 0;
}

#back, #next {
  padding: 8px 0;
  width: 25%;
}

.pic {
  display: grid;
  grid-template-columns: repeat(5, 20%);
}

.pic img {
  padding: 5px;
}

.pic li {
  cursor: pointer;
  opacity: .5;
}

.pic li:hover,
li.pic1 {
  opacity: 1;
}

.background {
  background: #ccf;
}

JavaScript

'use strict';

{
  const imges = [
  "img (1).jpg",
  "img (2).jpg",
  "img (3).jpg",
  "img (4).jpg",
  "img (5).jpg",
  "img (6).jpg",
  "img (7).jpg",
  "img (8).jpg",
  "img (9).jpg",
  "img (10).jpg",
//画像の保管場所のsrcを入力してください
  ];

  let imgIndex = 0;

  const mainImg = document.getElementById('main_img');
  mainImg.src = imges[imgIndex];
  
  imges.forEach((item,index) =>{
    const img = document.createElement('img');
    img.src = item;
    const li = document.createElement('li');
    if(index === imgIndex){
      li.classList.add('pic1');
    }
    li.appendChild(img);
    document.querySelector('.pic').appendChild(li);
    
    li.addEventListener('click',()=>{
      mainImg.src = item;
      const liAll = document.querySelectorAll('.pic > li');
      liAll[imgIndex].classList.remove('pic1');
      imgIndex = index;
      liAll[imgIndex].classList.add('pic1');
    });
  });

  const play = document.getElementById('play');
  const back = document.getElementById('back');
  const next = document.getElementById('next');

  next.addEventListener('click', ()=>{
    let target = imgIndex+1;
    if(target === imges.length){
      target = 0;
    }
    document.querySelectorAll('.pic > li')[target].click();
  });

   back.addEventListener('click', ()=>{
    let target = imgIndex-1;
    if(target === -1){
      target = imges.length-1;
    }
    document.querySelectorAll('.pic > li')[target].click();
  });

  let id;

  function start(){
     id = setTimeout(()=>{
      next.click();
      start();
    },2000);
  }
  
  let isPlaying = false;
  
  play.addEventListener('click',()=>{
    if(isPlaying === false){
      isPlaying = true;
      play.textContent = 'Pause';
      play.classList.add('background');
      start();
    } else {
      clearTimeout(id);
      play.textContent = 'Play';
      play.classList.remove('background');
      isPlaying = false;
    }

  });
}