ソケットブログ こんにちは、ムネトです。
今回、素のJavaScriptで下段にサムネイルを配置した画像のスライド機能（ボタン付き）を作っていきます。
JavaScript初心者の方でも取り組みやすい、やさしい内容となっています。
なおスタイルは必要最低限にとどめていますので、ご容赦ください。
デモはこちら↓
See the Pen JS Thumbnail Slide by ma3onousagi (@ma3onousagi) on CodePen.
機能要件
- “←”と”→”ボタンを左右に配置して画像の切り替え（ループ）
- サムネイルをクリックするとメイン画像が切り替わる
- 画像は”li”要素に配置している”img”を表示させる
コードの全体
今回の仕組みを作るためのコードです。
HTML
<section>
<div class="center">
<button id="prev" class="arrow">←</button>
<img src="http://blog.socketweb.net/wp-content/uploads/2023/10/code-img1.jpg" alt="image" id="mainImg">
<button id="next" class="arrow">→</button>
</div>
<ul>
<li>
<img src="http://blog.socketweb.net/wp-content/uploads/2023/10/code-img1.jpg" class="thumb" data-image="http://blog.socketweb.net/wp-content/uploads/2023/10/code-img1.jpg" alt="thumbnail">
</li>
<li>
<img src="http://blog.socketweb.net/wp-content/uploads/2023/10/code-img2.jpg" class="thumb" data-image="http://blog.socketweb.net/wp-content/uploads/2023/10/code-img2.jpg" alt="thumbnail">
</li>
<li>
<img src="http://blog.socketweb.net/wp-content/uploads/2023/10/code-img3.jpg" class="thumb" data-image="http://blog.socketweb.net/wp-content/uploads/2023/10/code-img3.jpg" alt="thumbnail">
</li>
<li>
<img src="http://blog.socketweb.net/wp-content/uploads/2023/10/code-img4.jpg" class="thumb" data-image="http://blog.socketweb.net/wp-content/uploads/2023/10/code-img4.jpg" alt="thumbnail">
</li>
</ul>
</section>JavaScript
//サムネイルの切り替え
const images = document.querySelectorAll('.thumb');
let currentImageIndex = 0;
images.forEach(function(item, i) {
item.onclick = function() {
currentImageIndex = i;//index
displayCurrentImage();
};
});
function displayCurrentImage() {
document.getElementById('mainImg').src = images[currentImageIndex].dataset.image;
}
//buttonで画像の切り替え
function changeImage(num) {
currentImageIndex += num;
if (currentImageIndex >= images.length) {
currentImageIndex = 0;
} else if (currentImageIndex < 0) {
currentImageIndex = images.length - 1;
};
displayCurrentImage();
}
document.getElementById('prev').onclick = function() {
changeImage(-1);
};
document.getElementById('next').onclick = function() {
changeImage(1);
};CSS
section {
max-width: 600px;
width: 100%;
margin: 0 auto;
}
img {
width: 100%;
height: auto;
}
.center {
display: flex;
align-items: center;
margin: 0 auto;
max-width: 300px;
margin-bottom: 2em;
}
.arrow {
cursor: pointer;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
li {
flex: 1 1 auto;
margin-left: 0.5em;
cursor: pointer;
}
li:first-child {
margin-left: 0;
}JavaScriptコードの説明
サムネイルをクリックしてメイン画像を切り替える
サムネイルをクリックすると
上段のメイン画像が切り替わるプログラムを作ります。
まずはじめに document.querySelectorAllメソッドを使って.thumb というクラスを取得します。
次に、currentImageIndexという変数に0を代入します。
images は document.querySelectorAll('.thumb') を使用して、HTML内のクラスが “thumb” のすべての要素を取得した NodeList です。これらの要素は画像を表示するためのサムネイルとして機能します。
const images = document.querySelectorAll('.thumb');
let currentImageIndex = 0;images の各要素に対して、forEach ループが実行されています。forEach メソッドは、配列や NodeList の各要素に対して指定された関数を適用します。
第一引数item は現在の要素を表し、第二引数i は現在の要素のインデックスを表します。
item.onclick は各要素がクリックされたときのイベントハンドラを設定しています。クリックされると、currentImageIndex 変数にクリックされた要素のインデックス (i) が代入されます。
最後に displayCurrentImage() 関数が呼び出され、クリックされたサムネイルに対応する画像を表示します。
images.forEach(function(item, i) {
item.onclick = function() {
currentImageIndex = i;
displayCurrentImage();
};
});
function displayCurrentImage() {
document.getElementById('mainImg').src = images[currentImageIndex].dataset.image;
}displayCurrentImage 関数は、document.getElementById('mainImg').src を使用して、ID が “mainImg” の画像要素の src 属性を更新します。更新された src 属性には、選択されたサムネイルの data-image 属性に指定された画像ファイルのパスが含まれます。これにより、サムネイルがクリックされるたびにメインの画像が更新されます。
サムネイルがクリックされると、選択されたサムネイルに対応するメイン画像が表示され、サムネイルのインデックスが currentImageIndex に保存されます。
（補足）data- 属性のdata-xxxのxxxの値は任意の値を設定することができます。
メイン画像をボタンクリックで切り替える
function changeImage(num) {
currentImageIndex += num;
if (currentImageIndex >= images.length) {
currentImageIndex = 0;
} else if (currentImageIndex < 0) {
currentImageIndex = images.length - 1;
};
displayCurrentImage();
}changeImage関数を用意します。- 引数
numは、切り替える画像の数を示す整数です。正の値は次の画像に、負の値は前の画像に移動することを示します。 currentImageIndex変数にnumを加えることで、現在の画像のインデックスを変更します。- 次に、
ifステートメントを使用して、currentImageIndexが画像の総数（images.length）を超えないように制御します。もし超えた場合、currentImageIndexを 0 に戻し、最初の画像に戻ります。 - 同様に、
currentImageIndexが負の値になった場合、最後の画像に戻ります（ループ）。 - 最後に、
displayCurrentImage関数を呼び出し、新しい画像を表示します。
document.getElementById('prev').onclick = function() {
changeImage(-1);
};
document.getElementById('next').onclick = function() {
changeImage(1);
};- “前へ” ボタンと “次へ” ボタンのクリックイベントを処理します。
document.getElementById('prev')の”前へ” ボタンがクリックされたときはchangeImage関数に-1を渡し、前の画像に切り替えます。document.getElementById('next')の”次へ” ボタンがクリックされたときはchangeImage関数に1を渡し、次の画像に切り替えます。
まとめ
いかがでしたか。
以外にも簡単に画像の切り替えを実装することができました。
最後までお付き合いいただき、ありがとうございました。
この記事が少しでも参考になれば幸いです。
