JavaScriptで画像をふわっと切り替える方法｜setIntervalを使ったシンプルなスライドショーの作り方

ホームページのトップページやキャンペーンページでは、複数の画像を一定時間ごとに切り替える演出がよく利用されています。

特に、画像が一瞬で切り替わるのではなく、フェードイン・フェードアウトしながら自然に切り替わるアニメーションは、サイト全体をより見やすく、おしゃれな印象にしてくれます。

最近ではSwiperなどのライブラリを利用する方法もありますが、画像を数枚切り替えるだけであれば、JavaScriptだけで十分実装できます。

この記事では、HTML・CSS・JavaScriptだけを使用して画像をふわっと切り替える方法を解説します。

また、オリジナルテーマで制作したWordPressサイトやHTMLサイトでもそのまま利用できるよう、実務でも使いやすいコードをご紹介します。

完成イメージ

まずは完成イメージをご覧ください。

3枚の画像が4秒ごとに切り替わり、2秒かけてふわっと表示されます。

今回はJavaScriptのみで実装しているため、外部ライブラリは必要ありません。

HTML

まずはHTMLを作成します。

<div class="change-image">
  <img src="https://saiun-wp.jp/wp-content/uploads/2026/03/number-badge01.png" class="active">
  <img src="https://saiun-wp.jp/wp-content/uploads/2026/03/number-badge02.png">
  <img src="https://saiun-wp.jp/wp-content/uploads/2026/03/number-badge03.png">
</div>

今回のHTMLでは、画像を3枚配置し、一番最初に表示したい画像へ activeクラス を付与しています。

<img class="active">

この activeクラス が付いている画像だけが表示される仕組みになっています。

また、画像全体を

<div class="change-image">

で囲んでいる点も重要です。

これは後ほどCSSやJavaScriptで対象を限定するためです。

ホームページには多くの画像が表示されていることがありますが、このようにクラス名を付けておくことで、今回のスライドショーだけにスタイルやJavaScriptを適用できます。

実際のホームページ制作でも、このように対象を限定して記述することで、他のデザインへ影響を与えにくいコードになります。

CSS

次にCSSを記述します。

<style>
.change-image {
  height: 150px;
  position: relative;
}

.change-image img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 2s ease;
  max-width: 150px;
}

.change-image img.active {
  opacity: 1;
}
</style>

---

position:absoluteで画像を重ねる

画像を切り替えるためには、3枚の画像を同じ位置へ重ねる必要があります。

そのため、

position:absolute;

を指定しています。

さらに

.change-image{
 position:relative;
}

を指定することで、このボックスの中だけで画像が重なるようになります。

---

opacityで表示・非表示を切り替える

画像は最初、

opacity:0;

になっています。

つまり透明な状態です。

activeクラスが付いた画像だけ

opacity:1;

になるため、その画像だけ表示されます。

---

transitionでふわっと表示する

今回のアニメーションは

transition:all 2s ease;

によって実現しています。

opacityが

0

↓

1

へ変化する際に2秒かけて切り替わるため、自然なフェードアニメーションになります。

実際には

transition:opacity 2s ease;

としても問題ありません。

opacityだけをアニメーションさせる場合はこちらの方が効率的です。

---

max-widthを指定している理由

今回はサンプルとして

max-width:150px;

を指定しています。

実際のホームページでは

• width
• max-width
• height:auto

などを組み合わせて、レスポンシブ表示に対応させるケースが一般的です。

JavaScript

最後にJavaScriptを記述します。

<script>
const images = document.querySelectorAll('.change-image img');
let number = 0;

function changeImage() {
  images[number].classList.remove('active');
  number = (number + 1) % images.length;
  images[number].classList.add('active');
}

setInterval(changeImage, 4000); 
</script>

このJavaScriptでは、4秒ごとにactiveクラスを付け替え、表示する画像を切り替えています。

---

querySelectorAllで画像を取得する

const images=document.querySelectorAll('.change-image img');

ここでは

change-imageクラス内にあるimgだけを取得しています。

もし

document.querySelectorAll("img")

としてしまうと、

ホームページ内にあるすべての画像が対象になってしまいます。

そのため、

.change-image img

のように範囲を限定する書き方がおすすめです。

これは実際のホームページ制作でもよく使われる書き方です。

---

numberで現在表示している画像を管理する

let number=0;

numberには現在表示している画像番号が入っています。

最初は

0

つまり1枚目の画像です。

---

activeクラスを付け替える

まず現在表示中の画像から

remove('active')

でactiveを外します。

その後、

add('active')

で次の画像へactiveを付与しています。

この処理によって表示画像が切り替わります。

---

%（余り）を使ってループさせる

一番重要なのが

number=(number+1)%images.length;

です。

例えば画像が3枚なら

0

↓

1

↓

2

↓

0

↓

1

というように繰り返されます。

最後まで表示すると最初の画像へ戻るため、無限ループのスライドショーになります。

---

setIntervalで一定時間ごとに実行する

最後に

setInterval(changeImage,4000);

を記述しています。

これは4秒ごとに

changeImage()

を実行するという意味です。

例えば

2000

にすると2秒ごと、

6000

なら6秒ごとに切り替わります。

画像枚数を増やしたい場合

今回のコードは

images.length

を使用しています。

そのため、

画像を追加するだけで4枚・5枚・10枚でもそのまま動作します。

JavaScriptを書き換える必要はありません。

よくある原因と確認ポイント

画像が切り替わらない場合は、次の点を確認してみましょう。

• activeクラスが最初の画像に付いているか
• JavaScriptが正しく読み込まれているか
• CSSファイルが読み込まれているか
• ブラウザの開発者ツール（Console）にエラーが表示されていないか
• 画像URLが間違っていないか

特にJavaScriptの記述ミスがあると、それ以降の処理が実行されなくなるため注意が必要です。

---

WordPressでも利用できる？

今回ご紹介したコードは、HTMLサイトだけでなく、WordPressでも利用できます。

例えばオリジナルテーマで制作したサイトであれば、

• index.php
• page.php
• single.php

などに組み込むことができます。

また、カスタムHTMLブロックを利用できるテーマであれば、用途によっては同様の実装が可能です。

ただし、テーマやプラグインによってはJavaScriptの読み込み方法が異なるため、サイト全体の構成に合わせて実装することをおすすめします。

---

まとめ

今回は、JavaScriptのsetIntervalを利用して、画像をふわっと切り替えるシンプルなスライドショーの作成方法をご紹介しました。

今回の方法は、外部ライブラリを使用せずに実装できるため、比較的シンプルなアニメーションを追加したい場合に適しています。

また、.change-image のように対象を限定したクラス名を使用することで、ホームページ内の他の画像やデザインへ影響を与えにくい構成になっています。

ホームページ制作では「動けば良い」だけでなく、「他の機能へ影響を与えない実装」を意識することも大切です。

このような考え方を身につけておくことで、保守性が高く、管理しやすいホームページを作成できるようになります。