☆HTML☆
スライドショー
スライドショーを作りました。
Playを押すと自動でスライドが進んでいき、Pauseを押すと止まります。
<は前のスライド、>は次のスライドへ移動します。
スライドショー下のサムネイル画像をクリックすると、その画像がスライドショーに表示されます。
![]()
☆CSS☆
*{
margin: 0;
}
header{
padding-top: 30px;
padding-bottom: 30px;
background: cyan;
text-align: center;
}
section{
padding-top: 30px;
padding-bottom: 30px;
padding-left: 30%;
}
main{
width: 300px;
margin: 0 auto;
}
img{
vertical-align: bottom;
}
ul{
list-style: none;
padding: 0;
margin: 0;
}
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;
}
#main{
width: 300px;
height: 200px;
margin-bottom: 8px;
}
.thumbnails{
display: grid;/*css gridを使用し、画像を横並びに*/
grid-template-columns: repeat(5,56px);/*画像を56pxで5列に並べる為のメソッドrepeat()*/
gap: 5px;/*余白*/
}
.thumbnails li{
cursor: pointer;
opacity: 0.4;
}
.thumbnails li:hover,
.thumbnails li.current{
opacity: 1;
}
.thumbnails img{
width: 56px;
}
☆JavaScript☆
'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;//images配列のindexが何番目の画像を表示しているかを保持する変数
const mainImage = document.getElementById('main');
mainImage.src = images[currentIndex];//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);
});//サムネイル画像を表示するための文,forEach()メソッドを使用
const next = document.getElementById('next');//htmlでのnext要素をjsでnextという定数で取得
next.addEventListener('click', () => {
let target = currentIndex + 1;
if (target === images.length) {
target = 0;
}//7まで行くとまた0に戻すための命令
document.querySelectorAll('.thumbnails > li')[target].click();//要素に対してclick()というメソッドを呼ぶと、その要素がクリックされた時の処理を実行してくれる。ここでは、定数liのaddEventListennerクリック内の処理が実行
});//>ボタンの設定
const prev = document.getElementById('prev');
prev.addEventListener('click', () => {
let target = currentIndex - 1;
if (target < 0) {
target = images.length - 1;
}
document.querySelectorAll('.thumbnails > li')[target].click();
});//<ボタンの設定
let timeoutId;
function playSlideshow() {
timeoutId = setTimeout(() => {
next.click();
playSlideshow();
}, 1000);
}
let isPlaying = false;
const play = document.getElementById('play');
play.addEventListener('click', () => {
if(isPlaying ===false){
playSlideshow();
play.textContent='Pause'
}else{
clearTimeout(timeoutId);
play.textContent='Play'
}
isPlaying = !isPlaying;
});
}