アプリ

スライドショー

投稿日:

 

html

<main>
<img id="main">
  <nav>
   <ul>
    <li id="play">再生</li>
    <li id="prev">&lt;</li>   これは>
    <li id="next">&gt;</li>   これは<
  </ul>
 </nav>

 <ul class="thumbnails">
 </ul>
</main>

css

 

js

定数変数

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 =>{9-1 imageにインデックスを追加してあげる
//また、アロー関数は引数がimage,indexと2つ以上ある時は()が必要
images.forEach((image, index) =>{
const img = document.createElement('img');

img.src = image;
const li = document.createElement('li');

//9-1 カレントインデックスの番号が同じならカレントクラスをつけてあげる
if (index === currentIndex){
li.classList.add('current');

}

//9-2 liにクリックイベントをつければいい
li.addEventListener('click', ()=>{

//メインの画像をセットする、メインのソース属性を変更してあげる
mainImage.src = image;

//10-1
const thumbnails = document.querySelectorAll('.thumbnails > li');

//10-1 カレントインデックス番目の要素に対して取りのぞく
thumbnails[currentIndex].classList.remove('current');

//10-1 そのうえカレンドインデックスを更新する
//10-1 クリックしたインデックスが何番目か
currentIndex = index;

//それに対して更新番目のカレントクラスをつける
thumbnails[currentIndex].classList.add('current');

});

li.appendChild(img);
document.querySelector('.thumbnails').appendChild(li);
});

//11 ネクストボタン index.htmlでidをnextとふってあるので
const next = document.getElementById('next');
next.addEventListener('click', ()=>{

//11-2 下記で先にtargetと作ったのはここで定数を書くのを見越していたからね
let target =currentIndex +1;//次のサムネイルの番号だから1を足す

//11-3 次へをクリックして最後にいったら次は最初になるようにする
//つまり、イメージの要素数と同じになったら~
if (target === images.length){
target = 0;//再代入しているので最初const targetとしたのでletに変える
}

// document.querySelectorAll('.thumbnails > li'); 11-1ターゲット番目とする
document.querySelectorAll('.thumbnails > li')[target].click();
});

//12-1 戻るボタンの実装
//といっても簡単でnextをprev等に変えればいい

const prev = document.getElementById('prev');
prev.addEventListener('click', ()=>{

let target =currentIndex -1;

//12-1最初の要素に来たら~
// if (target === images.length){ 0より小さくなったらということなので
if (target < 0){
target = images.length - 1;
}
document.querySelectorAll('.thumbnails > li')[target].click();
});

// 13 ラスト クリアタイムアウトを使うために変数をここで
let timeoutId = 0;

//12-2② 関数
function playSlideshow(){
// 次の画像に行きたいので
// next.click();
//一定時間(1000ms)ごとに繰り返せばいい
// setTimeout(()=>{
// playSlideshow()
// }, 1000); 押して1秒後に画像が切り替わっていくほうがいいので↓

// setTimeout(()=>{ 13ラストでタイムアウトIDの返り値をセットタイムアウトで受け取る

timeoutId = setTimeout(()=>{
next.click(); //この中に入れる
playSlideshow()
}, 1000);
}

//13-1
// true、falseの条件分岐を作って表示を変える、最初は動いていないのでfalse
let isPlaying =false;

//12-2 再生ボタン  スライドショー
const play = document.getElementById('play');
play.addEventListener('click', ()=>{

//13-1 再生ボタンをクリックした時isplayingがfalseなら再生が始まるようにする
if (isPlaying === false){

//一定時間ごとに処理をしなさい
//関数を作っておく↑12-2②
playSlideshow();

//13-1 再生が始まったら今度は再生ボタンのテキストを変えればいい
play.textContent ='停止';
}else{
clearTimeout(timeoutId);//13ラスト タイムアウトIDを作る↑
//13ラスト クリアタイムアウトを使うためには返り値の変数が必要(ここではタイムアウトID
play.textContent ='再生';
}

//伊豆プレイングではない時・・否定の演算子を使えばいい
isPlaying =! isPlaying;

});

 

 

 

 

 

 

 

 

 

 

 

 

 

-アプリ

Copyright© プログラミング , 2020 All Rights Reserved.