こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
今回は、Image CarouselアプリをJavaScriptで実装したいと思います。「Image Carousel」を日本語訳に直すと「画像のメリーゴーランド」です。
demoは「こちら」で確認できます。
環境構築
簡単な環境構築をお願いします。
必要なファイルは、以下の通りです。
|
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
CSS
ページ(HTML)の作成
最初にページを作成しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Image Carousel</title> </head> <body> <div class="carousel"> <div class="image-container" id="imgs"> <img src="https://images.unsplash.com/photo-1599394022918-6c2776530abb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1458&q=80" alt="first-image" /> <img src="https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" alt="second-image" /> <img src="https://images.unsplash.com/photo-1599423300746-b62533397364?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" alt="third-image" /> <img src="https://images.unsplash.com/photo-1599561046251-bfb9465b4c44?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1492&q=80" alt="fourth-image" /> </div> <div class="buttons-container"> <button id="left" class="btn">Prev</button> <button id="right" class="btn">Next</button> </div> </div> <script src="script.js"></script> </body> </html> |
このHTMLをブラウザ上で表示すると以下のようになります。
スタイル(CSS)を装飾
次にスタイルを記述しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; } img { width: 500px; height: 500px; object-fit: cover; } .carousel { box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); height: 530px; width: 500px; overflow: hidden; } .image-container { display: flex; transform: translateX(0); transition: transform 0.5s ease-in-out; } .buttons-container { display: flex; justify-content: space-between; } .btn { background-color: rebeccapurple; color: #fff; border: none; padding: 0.5rem; cursor: pointer; width: 49.5%; } .btn:hover { opacity: 0.9; } .btn:focus { outline: none; } |
ここまで実装すると以下のようになります。
JavaScriptの実装
準備ができたので、JavaScriptを実装していきましょう。
要素を取得する
最初に画面操作に必要な要素を取得します。
|
1 2 3 4 5 |
// 要素を取得する const imgs = document.getElementById('imgs') const leftBtn = document.getElementById('left') const rightBtn = document.getElementById('right') const img = document.querySelectorAll('#imgs img') |
画像回転処理の下地
画像回転処理の下地を作ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// 画像のインデックスを初期値 let idx = 0 // run関数を2秒間隔で実行 let interval = setInterval(run, 2000) function run() { // インデックスを切り替えることで画像を切り替える idx++ // 画像切り替え changeImage() } |
画像は全部で4枚あり、それぞれにインデックスをつけて管理します。
setIntervalは、一定間隔で指定した関数(ここではrun)を実行してくれる便利メソッドです。
changeImage関数は、これから実装します。
画像切り替え処理
次は、画像切り替え処理を作成します。
画像の大きさは、500pxで統一しています。そして、画像を納めるコンテナにはtranslateX関数が設定されています。
|
1 2 3 4 5 6 7 8 9 10 |
img { width: 500px; height: 500px; object-fit: cover; } .image-container { display: flex; transform: translateX(0); transition: transform 0.5s ease-in-out; } |
translateXは、要素を水平方向に動かす関数で、画像の大きさ(-500px)区切りで、水平方向に動かすことが可能になります。
ちなみに「transition: transform 0.5s ease-in-out;」をつけるとスライドアクションがとても滑らかになります。
前提知識はここまでにして、画像切り替え処理を実装しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function changeImage() { // インデックスがイメージの最大数を超えていないか // インデックスと配列は0から始まるので-1する if(idx > img.length - 1) { // 初期化 idx = 0 // インデックスがマイナスになった場合 } else if(idx < 0) { idx = img.length -1 } // translateXを設定 imgs.style.transform = `translateX(${-idx * 500}px)` } |
translateXには、マイナス値を設定してます。ここまでで、以下のように画像が切り替わります。
Next/Prevボタンの処理
Next/Prevボタンが押されたら、画像が切り替わるように実装します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// setIntervalをクリアする function resetInterval() { clearInterval(interval) interval = setInterval(run, 2000) } // Nextボタン rightBtn.addEventListener('click', () => { idx++ changeImage() resetInterval() }) // Prevボタン leftBtn.addEventListener('click', () => { idx-- changeImage() resetInterval() }) |
resetIntervalは、setIntervalを解除する関数です。これを行わないとsetIntervalが何度も実行されてしまうので、あまりよろしくありません。
Next/Prevボタンには、clickイベントを登録しています。この処理のおかげで、ボタンが押された時にイベントを発火できます。
これで完成です。
おわりに
Image Carouselアプリの処理は、某人気オンラインサイトでもよく見かけますよね。
実装もそれほど難しくはなさそうなので、ぜひチャレンジしてください^^
それでは、また!
JavaScriptまとめ
JavaScript ソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
// 要素を取得する const imgs = document.getElementById('imgs') const leftBtn = document.getElementById('left') const rightBtn = document.getElementById('right') const img = document.querySelectorAll('#imgs img') // 画像のインデックスを初期値 let idx = 0 // run関数を2秒間隔で実行 let interval = setInterval(run, 2000) function run() { // インデックスを切り替えることで画像を切り替える idx++ // 画像切り替え changeImage() } function changeImage() { // インデックスがイメージの最大数を超えていないか // インデックスと配列は0から始まるので-1する if(idx > img.length - 1) { // 初期化 idx = 0 // インデックスがマイナスになった場合 } else if(idx < 0) { idx = img.length -1 } // translateXを設定 imgs.style.transform = `translateX(${-idx * 500}px)` } // setIntervalをクリアする function resetInterval() { clearInterval(interval) interval = setInterval(run, 2000) } // Nextボタン rightBtn.addEventListener('click', () => { idx++ changeImage() resetInterval() }) // Prevボタン leftBtn.addEventListener('click', () => { idx-- changeImage() resetInterval() }) |
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/190f24cd.7532be9b.190f24ce.766b3442/?me_id=1213310&item_id=18177978&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F4111%2F9784774184111.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。