【jQuery】フェードで画像を切り替える

jQueryを使用して、フェードさせながら画像を切り替える方法を紹介します。単純に画像が繰り返し切り替わるだけのシンプルなコードとなっています。

フェード切り替えの作り方

まずは、HTMLを準備します。切り替える画像分だけボックスの中に入れておきます。

<div class="fade-img">
<img src="photo1.jpg" />
<img src="photo2.jpg" />
<img src="photo3.jpg" />
</div>

続いて、CSSで画像を表示させる位置を指定しておきます。

.fade-img {
  position:relative;
  width: 250px;
}
.fade-img img {
  position: absolute;
}

最後に画像を切り替える処理を作っていきます。

$(function(){
  $(".fade-img img:not(:first-child)").hide();
  setInterval(function() {
    $(".fade-img img:first-child").fadeOut("slow").next("img").fadeIn("slow").end().appendTo(".fade-img");
  },5000);
});

まず、2行目で「:not()」という否定疑似クラスを使って、最初の画像以外を非表示にするという指定をしています。「.hide()」が要素を非表示にする命令です。そして、「setInterval()」を使って、一定間隔で繰り返し処理を実行する命令をしています。タイマー処理とも言います。この場合だと最初に表示されている画像をフェードアウトさせ、次の画像をフェードインさせるという処理を繰り返し行うことになります。5000ミリ秒と設定をして、5秒かけて画像が切り替わるようになります。
「.appendTo()」を使って、フェードアウトした画像をボックス内の一番後ろに移動させる処理をしています。これにより、繰り返し画像が切り替わるように動きます。

例では、img要素が切り替わるようにしていますが、ボックスが切り替わるようにすればキャプションつきの画像を切り替えるようにすることもできます。