こんにちは。ツーリングで旅をするのが大好きミーハーです。
今回は、JavaScriptを使って画像を切り替える制御をやってみました。
Playを押すと2秒ごとに画像が切り替わり、<(アングル)を押すと一枚ずつ画像が切り替わります。
レブルをバックにスライドショーを作りました(o^―^o)ニコ
レブルかっこいい!!
リンクは写真をクリック↓

目次
製作の目的
- JavaScript学習のため
- 製作実績を作るため
ターゲット
- JavaScriptでできることを知りたい方
- JavaScriptでのクリックイベントのやり方を知りたい方
- webサイトでできることを知りたい方
製作内容
製作者の歴
プログラミング歴:1ヶ月半
JavaScript歴:3週間
使用言語
- HTML
- SCSS
- JavaScript
作業時間
3日
難易度
★★☆☆☆☆☆☆☆☆(星2)
ドットインストールを参考に作成し、ほとんど自分で考えていないため星2にしました。
※この難易度の主観は上記プログラミング歴の私です。
コード
HTML
<div class='box'>
<img id="main_img">
<div class='nav'>
<ul id="btn">
<li id ="play">Play</li>
<li id ="back"><</li>
<li id ="next">></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;
}
});
}
リンクは写真をクリック↓

最後に
このサイトの写真は、一眼レフでとってから圧縮して容量を減らしたのですが、それでもリロードに時間がかかってしまうのが欠点でした。
JavaScriptやっていて思いますが、document.getElementByIdよりdocument.querySelectorが便利すぎて、これだけでもいい気がします。
ホームページにもこういう機能があったら、ボタン押したくなりますね。
とりあえず、レブルかっこいい😊