【Javascript】クラスを使ってフォトビューワー作ったのでメモ
ES6から登場したクラスですが、もともとJavaやC#を触ってきた身からすると非常にありがたいです。Javascript版クラスをざっと覚えるためにフォトビューワーを作ってみました。
こんな感じに画像をクリックすると切り替わる(最後まで行ったら最初に戻る)という単純なやつです。
まずはHTML。VSCodeから自動生成されたものにちょっと加えただけです。<div id="viewer"></div>
に画像が表示されます。
<!DOCTYPE html> <html lang="jp"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="viewer"></div> <script src="main.js"></script> </body> </html>
次にJavascript側(main.js)です。
class ImageView{ constructor(images){ this.images = images; this.index = 0; } init(){ this.update(); const viewer = document.getElementById('viewer'); viewer.addEventListener('click', ()=>{ this.next(); }); } next(){ this.index++; if(this.index>=this.images.length) this.index=0; console.log(this.index); this.update(); } update(){ const viewer = document.getElementById('viewer'); const image = this.images[this.index]; viewer.innerHTML = `<div class="currentImage"><image height='350' src=${image} /></div>`; } } const images = ['im01.jpg', 'im02.jpg', 'im03.jpg']; new ImageView(images).init();
スポンサーリンク