【超簡単】jQueryで複数画像をフェード切り替えする方法

2020年3月29日 20:10

こんにちは！いちくん（@ichikun0000）と申します。

早速ですが、完成形をみてみましょう！

一応コードを貼っておきますね。

HTML

<div class="container">
  <div class="inner-block">
   <div class="title-box">
     <h1 class="ttl">
       複数画像をフェード切り替えするよ
     </h1>
   </div>
   <div class="fade-img-box">
     <img src="http://placekitten.com/500/300" alt="">
     <img src="http://placekitten.com/400/300" alt="">
     <img src="http://placekitten.com/200/100" alt="">
   </div>
 </div>
</div>

CSS

body {
 padding: 0;
 margin: 0;
}

h1 {
 margin: 0;
}

.container {
 overflow: hidden;
}

.inner-block {
 width: 600px;
 margin: 0 auto;
 position:relative;
}


.fade-img-box {
 width: 500px;
 height: 300px;
 margin-left: auto;
 margin-top: 10px;
 position:relative;
 border:10px solid #333;
}

.fade-img-box img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit:cover;
}

jQuery

 (function(){
// 設定
var interval =3000; // 切り替わりの間隔（ミリ秒）
var fade_speed = 1000;// フェード処理の早さ（ミリ秒）
$(".fade-img-box img").hide();
$(".fade-img-box img:first").addClass("active").show();

var changeImage = function(){
		var $active = $(".fade-img-box img.active");
		var $next = $active.next("img").length?$active.next("img"):$(".fade-img-box img:first");
   
		$active.fadeOut(fade_speed).removeClass("active");
		$next.fadeIn(fade_speed).addClass("active");
}


setInterval(changeImage,interval);
}());

コード解説(HTML,CSS)

図にすると以下のようなイメージとなっています。

大事なのはCSSです。

ここから、以下の部分について解説します。

.fade-img-box {
 width: 500px;
 height: 300px;
 overflow:hidden;
 margin-left: auto;
 position:relative;
 border:10px solid #333;
}

.fade-img-box img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit:cover;
}

今回、画像を見せる領域を

width:500px　height:300px

としました。

そして、inner-blockの右端に配置したかったので

margin-left:auto;

としています。

その後、.fade-img-box を

position:relative;　

とし、その中のimgを

position:absolute;　

で絶対配置しています。

さらに、top:0; , left:0; でimgを.fade-img-boxの左端に配置し、

width:100% , height:100%; でimgを.fade-img-boxいっぱいにひろげています。

ただ、こうするとimgのサイズによってはimgの比率が崩れる可能性があるので(画像が強制的にwidth:500px,height:300pxになるため)、

object-fit:cover;

を使うことで比率を崩さずにいい感じに見せるようにしています。

object-fitはよく使うので覚えましょう。

コード解説(jQuery)

さて、お次はjQueryの解説です。

 (function(){
// 設定
var interval =3000; // 切り替わりの間隔（ミリ秒）
var fade_speed = 1000;// フェード処理の早さ（ミリ秒）
$(".fade-img-box img").hide();
$(".fade-img-box img:first").addClass("active").show();

var changeImage = function(){
		var $active = $(".fade-img-box img.active");
		var $next = $active.next("img").length?$active.next("img"):$(".fade-img-box img:first");
   
		$active.fadeOut(fade_speed).removeClass("active");
		$next.fadeIn(fade_speed).addClass("active");

        }

setInterval(changeImage,interval);

}());

具体的に解説していきます。

まず、以下の部分。

// 設定
var interval =3000; // 切り替わりの間隔（ミリ秒）
var fade_speed = 1000;// フェード処理の早さ（ミリ秒）

interval変数は、このあと出てくるsetIntervalの第二引数に渡す変数です。

また、fade_speed変数もこのあと使う.fadeIn()と.fadeOut()メソッドの引数に渡すものです。

次にこの部分。

$(".fade-img-box img").hide();
$(".fade-img-box img:first").addClass("active").show();

.fade-img-boxの中にあるimgを.hide()で一度全部消して、

最初のimgにわかりやすいようにactiveクラスをつけて.show()で表示しています。

なのでこの段階では、.fade-img-boxの中にある最初のimgにactiveクラスが付いていてdisplay:block;の状態。それ以外のimgはdisplay:none;になっています。

次にこの部分。

var changeImage = function(){
		var $active = $(".fade-img-box img.active");
		var $next = $active.next("img").length?$active.next("img"):$(".fade-img-box img:first");
   
		$active.fadeOut(fade_speed).removeClass("active");
		$next.fadeIn(fade_speed).addClass("active");

        }

これは、この後setInterval()メソッドの第一引数にわたす関数です。

やっていることを説明すると、

1. activeクラスが付いている画像を.fadeOut()で消し .removeClass()でactiveクラスをはずす

2. activeクラスが付いている画像の次の画像(※)を.fadeIn()で表示し、.addClass()でactiveクラスを付ける

※次の画像がなかったら、一番最初の画像を表示（三項演算子の部分）

3. 1〜2を繰り返す（setInterval）

三項演算子の部分ですが、

var $next = $active.next("img").length?$active.next("img"):$(".fade-img-box img:first");

.lengthプロパティというものを使って、$active.next("img")があるかどうか判定しています。

ここで行なっていることは、、

$active.next("img")があったら$next変数に$active.next("img")を代入し、

$active.next("img")がなかったら$next変数に$(".fade-img-box img:first")を代入する

ということをしています。

.lengthはとてもよく使うので覚えておきましょう！

なお、関数をvar 関数名 = function(){}と書いていますがこれは関数式といいます。

関数宣言で書いた場合は、

function 関数名(){}

のようになります。

詳しくは以下を参考にすると良いでしょう。

さて、こうしてつくった関数をsetInterval()メソッドの第一引数に渡してあげます

setInterval(changeImage,interval);

setInterval() メソッドは、一定の遅延間隔(第二引数のinterval)を置いて第一引数の関数やコードスニペットを繰り返し呼び出すものです。

詳しくはこちらを参考にするとよいでしょう。

最後に即時関数で囲んでおきましょう。

 (function(){
    //省略

}());

これのメリットはプロジェクト内の他のvar変数を汚染しないことです。

即時関数はよく使うのでこの機会に覚えておきましょう！

まとめ

今回は、jQueryを使って複数画像をフェード切り替えする方法について解説しました。

一度自分で手を動かすことでより理解が深まると思うのでぜひご自分で絵を書くなりエディタで確認するなりして手を動かしてみてください。

ここまで読んでいただきありがとうございました。

この記事が気に入ったらサポートをしてみませんか？