ステップアップJavaScript フロントエンド開発の初級から中級へ進むために

● STEP 3-3

画像を自動で更新し見た目を整えて完成

一定時間で次の画像が表示されるようにする

　ボタンを押さずとも定期的に画像が更新されるように追加の実装をしましょう（リスト3-3-01）。

DEMO https://books.circlearound.co.jp/step-up-javascript/demos/step3/5

3-3-01　main.js

class PhotoViewer {

　...

　updatePhoto() {

　　const frameElm = this.rootElm.querySelector('.frame');

　　const imageIndex = this.currentIndex + 1; ❶

　　frameElm.innerHTML = `

　　　<div>

　　　　<p>${imageIndex}枚目</p>

　　　　<img src="${this.images[this.currentIndex]}" />

　　　</div>

　　`;

　　this.startTimer(); ❷

　}

　startTimer() {

　　if (this.timerKey) {

　　　clearTimeout(this.timerKey); ❸

　　}

　　this.timerKey = setTimeout(() => { ❹

　　　this.next();

　　}, 3);

　}

　}