読み込み中...

JavaScriptで写真をクリックして切り替える方法10選

JavaScriptで写真をクリックして切り替える JS
この記事は約30分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●JavaScriptで写真を切り替えるとは？

写真をクリックすると別の写真に切り替わる、そんな機能をWebサイトで見かけたことはありませんか？

これは、JavaScriptを使って実現されています。

JavaScriptで写真を切り替えることで、ユーザーとのインタラクションが生まれ、サイトの印象をグッと引き上げることができるのです。

でも、いざ実装しようと思っても、どうやればいいのかわからないですよね。

本記事では、そんなJavaScriptによる写真の切り替え方を、初心者にもわかりやすく解説していきます。

基本的な仕組みから、複数の写真を扱う方法、アニメーションを加える方法まで、順を追ってみていきましょう。

○写真切り替えの基本的な仕組み

写真の切り替えを実装するには、HTMLとJavaScriptを組み合わせます。

まずHTMLで、切り替えたい写真をimg要素で配置します。

このとき、それぞれの写真にidを付けておくことがポイントです。

次にJavaScriptで、写真のidを指定し、クリックイベントを設定します。

クリックされた写真を非表示にし、次の写真を表示するという処理を記述します。

これが写真切り替えの基本的な流れです。

○サンプルコード1：シンプルなクリックでの切り替え

それでは実際に、シンプルな写真の切り替えを実装してみましょう。

2枚の写真を用意し、クリックするたびに切り替わるようにします。

<img id="photo1" src="photo1.jpg" onclick="changePhoto()">
<img id="photo2" src="photo2.jpg" style="display:none">
let currentPhoto = 1;

function changePhoto() {
  if (currentPhoto === 1) {
    document.getElementById("photo1").style.display = "none";
    document.getElementById("photo2").style.display = "block";
    currentPhoto = 2;
  } else {
    document.getElementById("photo1").style.display = "block";
    document.getElementById("photo2").style.display = "none";
    currentPhoto = 1;
  }
}

HTMLでは、1枚目の写真にonclickイベントを設定し、changePhoto関数を呼び出しています。

2枚目の写真は初期状態で非表示にしておきます。

JavaScriptのchangePhoto関数では、currentPhotoの値に応じて、photo1とphoto2の表示/非表示を切り替えています。

ifの条件分岐で、現在表示中の写真を判定し、表示する写真を切り替えます。

このコードを実行すると、最初はphoto1.jpgが表示されます。それをクリックすると、photo2.jpgに切り替わります。

もう一度クリックすると、また元のphoto1.jpgに戻ります。これを繰り返すことで、写真の切り替えが実現できるのです。

シンプルな例ではありますが、写真切り替えの基本的な仕組みが理解できたのではないでしょうか。

JavaScript初心者の方でも、このコードをベースに、少しずつカスタマイズしていけば、自分のサイトに合った写真切り替えを実装できるはずです。

次は、この基本形をもとに、もう少し応用的な切り替え方法を見ていきましょう。

複数の写真を扱ったり、アニメーションを加えたりと、バリエーションは色々あります。

実際のサイトでよく目にするような、インタラクティブな写真の切り替えを一緒に作ってみましょう。

●複数の写真を切り替える方法

シンプルな2枚の写真切り替えは理解できましたね。

でも、実際のWebサイトではもっとたくさんの写真を扱うことが多いです。

例えば、商品紹介ページで色違いの商品を何枚も切り替えて見せたいとか、観光地の紹介ページで季節ごとの写真を切り替えたいなんてシーンがありますよね。

そんなとき、先ほどの方法だと、写真の枚数分だけ条件分岐を書かないといけません。

コードが長くなってしまって、見通しが悪くなりそうです。

もっとスマートに書けないものでしょうか？

実はJavaScriptには、配列やオブジェクトというデータ構造があります。

これを使えば、複数の写真を管理するのが楽になるんです。

配列やオブジェクトに写真のファイル名やパスを格納しておけば、ループ処理で切り替えが実装できます。

○サンプルコード2：配列を使った複数写真の切り替え

それでは、まず配列を使って複数の写真を切り替える方法を見てみましょう。

今回は3枚の写真を用意します。

<img id="photo" src="photo1.jpg">
const photos = ["photo1.jpg", "photo2.jpg", "photo3.jpg"];
let currentIndex = 0;

function changePhoto() {
  currentIndex++;
  if (currentIndex >= photos.length) {
    currentIndex = 0;
  }
  document.getElementById("photo").src = photos[currentIndex];
}

HTMLには、img要素を1つだけ用意しました。

切り替えるための写真は、JavaScriptの配列photosに格納しています。

JavaScriptでは、photos配列に写真のファイル名を文字列で格納しました。

currentIndexという変数を用意し、現在表示中の写真のインデックス番号を管理します。

changePhoto関数の中では、currentIndexをインクリメントし、photos配列の長さを超えたら0に戻すようにしています。

これで、写真1→写真2→写真3→写真1→…と、ぐるぐる切り替わるようになります。

実際に切り替える処理は、document.getElementById(“photo”).src = photos[currentIndex];の1行だけ。

配列の要素を順番にsrcに設定するだけで、複数の写真を切り替えられるのです。

実行してみると、「photo1.jpg」→「photo2.jpg」→「photo3.jpg」→「photo1.jpg」…と、3枚の写真が順番に切り替わっていきます。

配列のおかげで、シンプルなコードで実現できました。

写真の枚数が変わっても、photos配列の中身を変更するだけ。条件分岐を追加する必要はありません。配列を使った方が、コードの変更が少なくて済むので便利ですね。

○サンプルコード3：オブジェクトを使った切り替え

配列では写真のファイル名しか扱えませんでしたが、もう少し情報を持たせたい場合もあるでしょう。

例えば、写真ごとにキャプションをつけたいとか、リンク先を指定したいというときには、オブジェクトが活躍します。

オブジェクトなら、写真に関連する情報をまとめて管理できるんです。

ファイル名だけでなく、キャプションやリンク先、alt属性など、色々な情報を写真ごとに持たせられます。

サンプルコードを見てみましょう。

photos配列の中に、写真の情報をオブジェクトで格納しています。

const photos = [
  {
    src: "photo1.jpg",
    caption: "美しい夕焼け",
    link: "https://example.com/photo1"
  },
  {
    src: "photo2.jpg",
    caption: "にぎやかな街並み",
    link: "https://example.com/photo2"
  },
  {
    src: "photo3.jpg",
    caption: "自然あふれる公園",
    link: "https://example.com/photo3"
  }
];

let currentIndex = 0;

function changePhoto() {
  currentIndex++;
  if (currentIndex >= photos.length) {
    currentIndex = 0;
  }
  const photo = photos[currentIndex];
  document.getElementById("photo").src = photo.src;
  document.getElementById("caption").textContent = photo.caption;
  document.getElementById("link").href = photo.link;
}

写真の切り替え処理は配列のときとほとんど同じです。

ただ、photos[currentIndex]がオブジェクトになったので、photo.src、photo.caption、photo.linkのようにプロパティにアクセスして、それぞれの値を要素に設定しています。

こうすることで、写真だけでなく、キャプションやリンクも一緒に切り替えができるわけです。

実行結果を見てみると、写真の下にキャプションが表示され、写真をクリックするとリンク先に飛べます。

写真に関連する情報を一元管理できるので、コードもすっきりまとまりました。

配列やオブジェクトを使えば、もっと自由度の高い写真切り替えが実現できるのがおわかりいただけたでしょうか。

たくさんの写真を扱う場合や、写真に付加情報をつけたい場合に、ぜひ活用してみてください。

●アニメーションを加えた切り替え

写真をただ切り替えるだけでも十分インパクトはありますが、それにアニメーションを加えることでさらに印象的な演出ができます。

例えば、写真がフェードインで浮かび上がってくるような効果や、スライドショーのようにスライドしながら切り替わっていく効果などです。

こういったアニメーションを加えると、サイトが動きのあるインタラクティブな雰囲気になり、ユーザーの注目を集めやすくなります。

訪問者の滞在時間が長くなったり、サイトへの好感度が上がったりと、Webサイトの評価向上にも役立つでしょう。

少し前まではjQueryを使うのが主流でしたが、最近のJavaScriptはアニメーションの機能が充実してきました。

特にCSS Transitionsを使えば、JavaScriptでスムーズなアニメーションを実装できるんです。

というわけで、これからサンプルコードを見ながら、JavaScriptでフェードインやスライドショーを実装する方法を解説していきます。

初心者の方にもわかりやすいよう、コードを詳しく説明していくので、ぜひ試してみてくださいね。

○サンプルコード4：フェードインでの切り替え

まずはフェードインを使った写真の切り替えから見ていきましょう。

フェードインというのは、写真が徐々に浮かび上がるように表示される効果のことです。

不透明度（opacity）を0から1に変化させることで実現します。

<div id="gallery">
  <img src="photo1.jpg" class="active">
  <img src="photo2.jpg">
  <img src="photo3.jpg">
</div>
#gallery {
  position: relative;
}

#gallery img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s;
}

#gallery img.active {
  opacity: 1;
}
const photos = ["photo1.jpg", "photo2.jpg", "photo3.jpg"];
let currentIndex = 0;

function changePhoto() {
  const gallery = document.getElementById("gallery");
  gallery.children[currentIndex].classList.remove("active");
  currentIndex++;
  if (currentIndex >= photos.length) {
    currentIndex = 0;
  }
  gallery.children[currentIndex].classList.add("active");
}

setInterval(changePhoto, 3000);

HTMLでは、div要素の中に複数のimg要素を配置しました。

CSSでは、img要素を絶対位置指定し、重ねて配置します。

不透明度はデフォルトで0に設定し、activeクラスが付与されたときに1になるようにしています。

transition: opacity 1s;でフェードインのアニメーションを設定しました。

JavaScriptのchangePhoto関数では、現在表示中の写真からactiveクラスを取り除き、次の写真にactiveクラスを付与しています。

setInterval(changePhoto, 3000);で3秒ごとにchangePhoto関数を呼び出し、自動的に切り替わるようにしました。

実行すると、3秒ごとに写真がフェードインで切り替わっていきます。

写真が浮かび上がるように表示されるので、柔らかい印象を与えられます。

○サンプルコード5：スライドショー風の切り替え

次はスライドショー風の切り替えを実装してみましょう。

こちらは、写真が横にスライドしていくような効果になります。

translateXを使って写真の位置をずらすことで、スライドを表現します。

<div id="slideshow">
  <img src="photo1.jpg">
  <img src="photo2.jpg">
  <img src="photo3.jpg">
</div>
#slideshow {
  width: 100%;
  overflow: hidden;
}

#slideshow img {
  width: 100%;
  transition: transform 1s;
}
const slideshow = document.getElementById("slideshow");
const photos = slideshow.children;
let currentIndex = 0;

function changePhoto() {
  photos[currentIndex].style.transform = "translateX(-100%)";
  currentIndex++;
  if (currentIndex >= photos.length) {
    currentIndex = 0;
  }
  photos[currentIndex].style.transform = "translateX(0)";
}

setInterval(changePhoto, 3000);

HTMLは先ほどと同じように、div要素の中にimg要素を複数配置します。

CSSでは、#slideshowの幅を100%にし、overflow: hidden;で横にはみ出す部分を非表示にします。

img要素にtransition: transform 1s;を設定し、transformプロパティの変化にアニメーションをつけます。

JavaScriptでは、現在表示中の写真をtranslateX(-100%)で左に100%分ずらし、次の写真をtranslateX(0)で元の位置に戻します。

これを繰り返すことで、写真が右から左にスライドしていくように見えます。

実行結果を見ると、写真が右から左へとスライドしながら切り替わっていきます。

スライドのスピード感があり、ダイナミックな印象になりますね。

フェードインもスライドも、CSSとJavaScriptを組み合わせることで比較的シンプルに実装できました。

ぜひ自分のサイトに取り入れて、オリジナリティのある写真切り替えを実現してみてください。

●自動でループさせる方法

今まで見てきたサンプルコードでは、写真の切り替えはクリックイベントに依存していましたね。

でも、写真をある一定の時間間隔で自動的に切り替えたいこともあるでしょう。

そんなときに便利なのが、JavaScriptのsetInterval関数です。

setInterval関数を使えば、指定した時間ごとに写真を切り替える処理を実行できます。

つまり、ユーザーがクリックしなくても、自動でスライドショーのように写真が切り替わっていくようになるんです。

こうすることで、サイトに動きをつけ、ユーザーの滞在時間を長くするのに役立ちます。

ただ、自動で切り替わるスライドショーだと、ユーザーが写真をじっくり見たいと思っても先に進んでしまうかもしれません。

そこで、マウスオーバーしたら一時停止する機能もつけておくと親切ですね。

JavaScript側で、マウスオーバーとマウスアウトのイベントを検知し、それに応じてsetIntervalをクリアしたり再開したりすることで実装できます。

それではサンプルコードを見ながら、自動ループとマウスオーバーでの一時停止の方法を学んでいきましょう。

JavaScriptのsetIntervalとclearInterval、addEventListener関数を使います。コードの中身を詳しく解説するので、ぜひ理解を深めてくださいね。

○サンプルコード6：一定時間ごとに自動切り替え

まずは、setInterval関数を使って写真を一定時間ごとに自動で切り替えるサンプルコードです。

<div id="slideshow">
  <img src="photo1.jpg">
  <img src="photo2.jpg">
  <img src="photo3.jpg">
</div>
const slideshow = document.getElementById("slideshow");
const photos = slideshow.children;
let currentIndex = 0;

function changePhoto() {
  photos[currentIndex].style.opacity = 0;
  currentIndex++;
  if (currentIndex >= photos.length) {
    currentIndex = 0;
  }
  photos[currentIndex].style.opacity = 1;
}

let intervalId = setInterval(changePhoto, 3000);

HTMLとCSS（省略）は前のサンプルコードと同じです。

JavaScriptでは、setInterval(changePhoto, 3000);という一行を追加しました。

これは、changePhoto関数を3000ミリ秒（3秒）ごとに実行するという意味です。

実行してみると、3秒ごとに自動で写真が切り替わるようになりました。

ユーザーがクリックしなくても、写真がループして表示され続けます。

setInterval関数のおかげで、簡単に自動スライドショーが実現できましたね。

○サンプルコード7：マウスオーバーで一時停止

続いて、自動ループ中にマウスオーバーしたら一時停止する機能を追加してみましょう。

<div id="slideshow">
  <img src="photo1.jpg">
  <img src="photo2.jpg">
  <img src="photo3.jpg">
</div>
const slideshow = document.getElementById("slideshow");
const photos = slideshow.children;
let currentIndex = 0;
let intervalId;

function changePhoto() {
  photos[currentIndex].style.opacity = 0;
  currentIndex++;
  if (currentIndex >= photos.length) {
    currentIndex = 0;
  }
  photos[currentIndex].style.opacity = 1;
}

function startSlideshow() {
  intervalId = setInterval(changePhoto, 3000);
}

function stopSlideshow() {
  clearInterval(intervalId);
}

slideshow.addEventListener("mouseover", stopSlideshow);
slideshow.addEventListener("mouseout", startSlideshow);

startSlideshow();

JavaScriptでは、startSlideshow関数とstopSlideshow関数を新たに定義しました。

startSlideshow関数の中でsetIntervalを呼び出して自動切り替えを開始し、stopSlideshow関数の中でclearIntervalを呼び出して自動切り替えを停止します。

そして、slideshowにマウスオーバー（mouseover）したときにstopSlideshow関数を、マウスアウト（mouseout）したときにstartSlideshow関数を実行するようにaddEventListenerで設定しました。

これで、自動ループ中にマウスオーバーすると一時停止し、マウスアウトすると再開するようになります。

写真の切り替わりを止めてじっくり見たいときに便利ですね。

●よくあるエラーと対処法

JavaScriptで写真の切り替えを実装しようとしたとき、思うように動かなくてイライラした経験はありませんか？

コードを書いたのに、写真が表示されなかったり、切り替えがうまくいかなかったりして、原因がわからずに頭を抱えてしまったこと、私にもあります。

肝心なのは、そのエラーにどう対処するかです。

エラーメッセージをしっかり読んで、原因を突き止める。

そして、正しいコードに修正する。

これを繰り返すことで、だんだんとエラーに強くなっていけるはずです。

これから、写真切り替えを実装する際によくぶつかるエラーと、その対処法をご紹介します。

私も経験したことのあるエラーがほとんどです。

実際のコードを見ながら、エラーが発生するパターンを追っていきましょう。

エラーの原因がわかれば、もう怖くありません。

むしろ、エラーに出会ったときこそ、JavaScriptの理解が深まるチャンスだと思います。

一緒にエラーを乗り越えて、写真切り替えの達人を目指しましょう！

○写真が表示されない場合

写真の切り替えコードを書いたのに、写真が1枚も表示されないことがあります。

こんなエラーメッセージが出たのではないでしょうか。

GET file:///C:/Users/ユーザー名/example/photo1.jpg net::ERR_FILE_NOT_FOUND

これは、指定した画像ファイルが見つからないというエラーです。

ファイルのパスが間違っているか、ファイル名のタイプミスが考えられます。

<img src="photo1.jpg">
const img = document.querySelector("#gallery img");
img.src = "photo2.jpg";

上記のようなコードで、photo1.jpgやphoto2.jpgという画像ファイルが、HTMLファイルと同じフォルダにない場合にエラーが発生します。

対処法としては、まずファイルのパスを確認しましょう。

HTMLファイルからの相対パスで指定していますか？必要なら絶対パスで指定してみてください。

また、ファイル名に大文字小文字の違いやタイプミスがないかもチェックしてください。

JavaScriptは大文字小文字を区別しますから、photo1.jpgとPhoto1.jpgは別物として扱われます。

パスとファイル名が合っているはずなのに表示されない場合は、画像ファイル自体に問題がある可能性もあります。

壊れていたり、対応していない形式だったりすると、表示エラーになります。

画像ファイルを開けるか、別の画像に差し替えて試してみるのも手です。

○切り替えがうまくいかない場合

写真は表示されるけれど、クリックやホバーイベントで切り替えがうまく動かない。

こんなエラーメッセージが出ていませんか。

Uncaught TypeError: Cannot read property 'addEventListener' of null

これは、JavaScriptがHTMLの要素を見つけられずに、addEventListenerを設定できないというエラーです。

DOM要素の取得がうまくいっていない可能性が高いです。

<div id="gallery">
  <img src="photo1.jpg">
</div>
const gallery = document.querySelector(".gallery");
gallery.addEventListener("click", changePhoto);

上記のようなコードで、HTMLのdiv要素にgalleryというidを設定しているのに、JavaScriptでは.galleryとクラス名で取得しようとしているため、エラーが起こります。

対処法としては、HTMLとJavaScriptでセレクタの指定方法を揃えることです。

IDならば#gallery、クラスならば.galleryで統一しましょう。

また、タイピングミスもよくある原因です。

gallery を gellery と書いてしまったり、#を忘れてしまったり。

コードをよく見直して、正しいセレクタになっているか確認しましょう。

それでもエラーが出るようなら、そもそもJavaScriptファイルがHTMLから正しく読み込めているか確認です。

scriptタグのsrc属性に指定したパスが間違っていると、JavaScriptが動きません。

コンソールでファイルの404エラーが出ていないかチェックしてみてください。

○ページ読み込み時に切り替わってしまう

ページを読み込んだ瞬間に、写真が意図せず切り替わってしまうトラブルもよくあります。

それ自体はエラーではありませんが、望んだ動作ではないはずです。

こんなコードを書いていませんか？

let currentIndex = 0;

function changePhoto() {
  // 写真の切り替え処理
  currentIndex++;
}

changePhoto();

関数を定義した直後に、その関数を呼び出しているため、ページ読み込み時に関数が実行されてしまっているのです。

対処法は簡単で、関数の呼び出しをイベントハンドラの中に移動するだけです。

let currentIndex = 0;

function changePhoto() {
  // 写真の切り替え処理 
  currentIndex++;
}

document.querySelector("#gallery").addEventListener("click", changePhoto);

こうすることで、クリックされたときだけchangePhoto関数が呼び出されるようになります。

ページを読み込んだ直後に切り替わることはなくなるはずです。

自動スライドショーの場合は、setIntervalを使っている箇所を見直してください。

次のようになっていませんか？

setInterval(changePhoto(), 3000);

setIntervalの第一引数には関数を渡す必要がありますが、上記のコードでは関数の呼び出し結果を渡してしまっています。

正しくは以下です。

setInterval(changePhoto, 3000);

カッコを外すだけで、ページ読み込み時の切り替えは解消できます。

このように、写真切り替えのエラーは、ほとんどがちょっとしたコードミスが原因です。

でも、そのミスに気づくのは案外難しかったりしますよね。

エラーが出たらめげずに、コードをじっくり見直すこと。

そしてエラーメッセージを手がかりに、原因を特定していくこと。地道な作業ですが、これを繰り返すことが、JavaScriptのスキルアップにつながります。

●JavaScriptによる写真切り替えの応用例

さて、ここまでJavaScriptを使った写真切り替えの基本的なテクニックをマスターしてきましたね。

クリックやホバーで写真を切り替えたり、アニメーションを加えたり、自動ループさせたり。

実際のWebサイトを見渡してみると、写真の切り替えを使ったインタラクティブな表現があふれています。

例えば、商品のサムネイルをクリックすると大きな画像に切り替わるギャラリーや、カテゴリ別に写真を切り替えて表示するポートフォリオサイトなど。

これらの応用例に共通しているのは、写真の切り替えを単なる見た目の変化だけでなく、ユーザーとのコミュニケーションツールとして活用している点です。

写真の切り替えを通して、ユーザーを飽きさせない、ユーザーに選択肢を与える、ユーザーの興味を引き出す。

そんな効果を狙っているのです。

というわけで、ここからは実際のWebサイトを参考に、写真切り替えのアイデアを膨らませていきましょう。

サンプルコードを交えながら、応用テクニックに挑戦です。

あなたの創造力を存分に発揮してください。

ユーザーの心を動かすような、魅力的な写真の切り替え方を見つけられるはずです。

○サムネイルクリックで大きな画像に切り替え

ECサイトなどでよく見かける、サムネイル画像をクリックすると大きなメイン画像が切り替わる機能。

これも写真の切り替えを応用したインタラクションデザインの一つです。

サムネイルとメイン画像を別の要素として用意し、サムネイルのクリックイベントでメイン画像のsrc属性を変更します。

こんな感じのコードになります。

<div id="gallery">
  <img id="main-photo" src="photo1.jpg">
  <div id="thumbnails">
    <img src="photo1.jpg" onclick="changeMainPhoto('photo1.jpg')">
    <img src="photo2.jpg" onclick="changeMainPhoto('photo2.jpg')">
    <img src="photo3.jpg" onclick="changeMainPhoto('photo3.jpg')">
  </div>
</div>
function changeMainPhoto(photoSrc) {
  document.getElementById("main-photo").src = photoSrc;
}

各サムネイル画像にはchangeMainPhoto関数を呼び出すonclickイベントを設定。引数には切り替えたい画像のファイル名を渡します。

こうすることで、ユーザーはサムネイルを見ながら好きな写真を選べます。

メイン画像が大きく切り替わるので、写真の細部までじっくり見ることができます。

ECサイトの商品写真などに効果的な手法ですね。

○カテゴリ別に写真を切り替えて表示

ポートフォリオサイトや写真ギャラリーで、カテゴリ別に写真を分けて表示したいことがあります。

例えば、「風景」「ポートレート」「食べ物」といったカテゴリを用意し、カテゴリを選ぶとそれに応じた写真だけが切り替わって表示される、といった具合です。

カテゴリ別の写真の切り替えも、JavaScriptのオブジェクトとデータ属性を活用すれば実現できます。

写真のデータとカテゴリをオブジェクトで紐付けておき、カテゴリ選択時にはデータ属性を使って表示する写真を絞り込みます。

<div id="gallery">
  <div id="categories">
    <button data-category="landscape">風景</button>
    <button data-category="portrait">ポートレート</button>
    <button data-category="food">食べ物</button>
  </div>
  <div id="photos">
    <img src="photo1.jpg" data-category="landscape">
    <img src="photo2.jpg" data-category="portrait">
    <img src="photo3.jpg" data-category="food">
    <img src="photo4.jpg" data-category="landscape">
    <img src="photo5.jpg" data-category="food">
  </div>
</div>
const photos = {
  landscape: ["photo1.jpg", "photo4.jpg"],
  portrait: ["photo2.jpg"],
  food: ["photo3.jpg", "photo5.jpg"]
};

function showPhotos(category) {
  const photoElements = document.querySelectorAll("#photos img");
  photoElements.forEach((photo) => {
    if (photo.dataset.category === category) {
      photo.style.display = "block";
    } else {
      photo.style.display = "none";
    }
  });
}

document.querySelectorAll("#categories button").forEach((button) => {
  button.addEventListener("click", () => {
    const selectedCategory = button.dataset.category;
    showPhotos(selectedCategory);
  });
});

photosオブジェクトには、カテゴリ名をキーに、それに属する写真のファイル名を配列で格納しておきます。

HTMLでは、各写真にdata-category属性を設定し、どのカテゴリに属するかを明示。

カテゴリ選択用のボタンにもdata-category属性を設定します。

showPhotos関数の中で、選択されたカテゴリとdata-category属性が一致する写真だけを表示するようにしています。

これで、カテゴリ選択に応じた写真の切り替え表示が実現します。

ユーザーはカテゴリを選ぶことで、見たい写真だけを絞り込めます。

写真点数の多いサイトでは、ユーザビリティの向上につながる工夫だと言えるでしょう。

○ランダムに写真を表示する

写真をランダムに表示させるのも面白い演出です。

リロードするたびに違う写真が現れるようにすれば、サイトに新鮮さと期待感を持たせられます。

ランダム表示も、JavaScriptの組み込みオブジェクトMathを使えば簡単に実装できます。

Math.random()で0以上1未満の乱数を生成し、その値に応じて表示する写真を切り替えるだけ。

<img id="random-photo">
const photos = ["photo1.jpg", "photo2.jpg", "photo3.jpg", "photo4.jpg", "photo5.jpg"];

function showRandomPhoto() {
  const randomIndex = Math.floor(Math.random() * photos.length);
  document.getElementById("random-photo").src = photos[randomIndex];
}

showRandomPhoto();

写真のファイル名を配列photosに格納しておきます。

showRandomPhoto関数の中では、Math.random()で生成した乱数に写真の枚数をかけ、Math.floor()で小数点以下を切り捨てることで、ランダムなインデックス番号を取得。

そのインデックス番号に対応する写真を表示します。

ページを読み込むたびにshowRandomPhoto関数を呼び出せば、いつも違う写真が表示されるようになります。

運試しのようなゲーム性を加えられるので、ユーザーの興味を引くのに有効かもしれません。

まとめ

JavaScriptを使った写真の切り替え方、いかがでしたか？

基本的な切り替えからアニメーション、自動ループ、そして応用例まで、たくさんのテクニックを解説してきました。

最初は難しく感じたかもしれませんが、コツをつかめば思いのままに写真を操れるようになったのではないでしょうか。

JavaScriptのちょっとした記述で、Webサイトがグッとインタラクティブになる。

そんな醍醐味を味わえたら嬉しいです。