Jqueryでクロスフェードスライドショーの作り方（デザイナーでも出来る自作編）

2017年4月9日

jQueryでクロスフェードで切り替わるスライドショーを、jquery初級のWEBデザイナーでも自作する事ができる方法をわかりやすく解説したいと思います。以前書いた記事「Jqueryでスライドショーの作り方（デザイナーでも出来る自作編）」の発展版であり、以前に加えてクロスフェードにしてさらに最初の画像を毎回ランダムにする機能を追加しました。

ただしこの記事は、ある程度jQueryの基礎を理解している方向けですので、もしjqueryの基礎がまだ怪しいという方は、次の本を是非おすすめします。

この本はドーナツ本と言われており、業界では超有名！私自身もこの本と出会ってjQueryやJavaScriptに対する苦手意識が無くなり、jQueryを自作するってこんなに簡単なんだ！とやる気にさせてくれました。

今回つくるサンプルの完成形

３つの画像がクロスフェードで順番に切り替わっていくのがわかると思います。わかりにくいかもしれませんが、画面をリロードする度に、一番最初に表示される画像がランダムで違うようになっています。ただ、ランダムなので1/3の確率で前回と同じ画像が選ばれる可能性がありますので、前回と変わらない場合は何度かリロードしてみてください。

下の画像をクリックするとCodePenで実装したものを確認できます(コードしか見えない場合はResultを押して再生して下さい)。

See the Pen crossfade_slideshow by stand4u (@stand4u) on CodePen.

それでは順番に内容を説明していきましょう。

今回作成するスライドショーの仕組み

HTMLとCSSで３枚の画像をピッタリと重ねて表示しておきます。次にjQueryで一番上の画像をfadeOutして消す事により、次の画像がクロスフェードして見えるという関数を作ります。さらにその関数を、setIntervalという既存の関数を使って、任意の秒に１度繰り返すというのが、今回作成するスライドショーの仕組みです。

まずはHTMLの記述

<div id="slide">
  <img src="https://stand-4u.com/img/photo1.jpg" />
  <img src="https://stand-4u.com/img/photo2.jpg" />
  <img src="https://stand-4u.com/img/photo3.jpg" />
</div>

HTMLの記述はシンプルで、id="slide"のdivの中にimgが３つ入っているだけです。もちろん記述を変えれば、背景画像のdivなどにも応用できます。

次にcssの記述

#slide{
  position:relative;
}
#slide img{
   position: absolute;
   left:0;
   top:0;
}

CSSもシンプルで、外枠のdiv#slideに「position:relative;」中のimgに「position: absolute; left:0; top:0;」などと設定して３つの画像を重ねて、一番上にある1枚だけが見えるように設定します。下準備として、全ての画像のサイズを揃えるか、もしくはcssのトリミングなどで調整して、一番上の1枚だけが見えるような状態にしてください。

そしてjQueryの記述

ちょっと長めですが、安心して下さい！ソース内のコメントアウトされた番号を元に、順番に内容を説明していきます。

$(function(){
//(1)変数の設定
var page
var lastPage =parseInt($("#slide img").length-1);
var random = Math.round( Math.random()*lastPage );
var nextPage

//(2)初期画像をランダム設定し、次の画像を設定
page=random
  if(page === lastPage){
               nextPage = 0;
  }else{
               nextPage = page+1;
};

//(3)画像の重なり順の初期表示
//nextPageを先頭にするのは初回のインターバルで前面に来る画像なのでこれをfadeOutするため
  $("#slide img").css("z-index","-3");
  $("#slide img").eq(nextPage).css("z-index","-1");

//(4)ページ切換関数
function changePage(){
//まず全部最背面へ
  $("#slide img").css("z-index","-3");
//pageを最前面へ
  $("#slide img").eq(page).css("z-index","-1");
//nextPageを２番目へ
  $("#slide img").eq(nextPage).css("z-index","-2");
//毎回全部display blockする
  $("#slide img").css("display","block");
//最前面のpageをfadeOutすると２番目nextPageが見えてくる
  $("#slide img").eq(page).fadeOut(2500);
};

//(5)カウントアップ関数
function countUp(){
&nbsp; if(page === lastPage){
&nbsp;&nbsp;&nbsp; page = 0;
&nbsp;&nbsp;&nbsp; nextPage = 1;
&nbsp;&nbsp;&nbsp; changePage();
&nbsp;&nbsp; }else if(nextPage===lastPage){
&nbsp;&nbsp;&nbsp; page ++;
&nbsp;&nbsp;&nbsp; nextPage = 0;
&nbsp;&nbsp;&nbsp; changePage();
&nbsp;&nbsp; }else{
&nbsp;&nbsp;&nbsp;&nbsp; page ++;
&nbsp;&nbsp;&nbsp;&nbsp; nextPage = page+1;
&nbsp;&nbsp;&nbsp;&nbsp; changePage();
&nbsp;&nbsp; } 
};
&nbsp; 
//(6)任意の秒間隔でイメージ切換の発火設定
var Timer;
function startTimer(){
Timer =setInterval(function(){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; countUp();
&nbsp;&nbsp;&nbsp;&nbsp; },4000);
};

//～秒間隔でイメージ切換の停止設定
function stopTimer(){
clearInterval(Timer);
};

//タイマースタート
startTimer();
&nbsp; 
});

(1)変数の設定

var page
var lastPage =parseInt($("#slide img").length-1);
var random = Math.round( Math.random()*lastPage );
var nextPage

今回使う変数の設定です。まずは「page」ですが、クロスフェードさせる画像1枚を「ページという概念」でとらえてそのページを操作していくという流れになりますのでまず、「page」という変数を定義します。値はのちほど入れます。

次に「lastPage」の定義。今回は3枚の画像ですが、画像が何枚に増えても対応できるように作りますので、画像の枚数を自動で確認させ、最後のページ（画像）のページ数を変数化したものです。「parseInt($("#slide img").length」で#slideの中のimgファイルの数を自動的にかぞえてマイナス１しています。マイナス１は、便宜上、最初の画像を0ページという概念で作りますので、合わせるためにマイナス１しています。

少しややこしいですが、画像とページの関係を整理すると、

ページ０（１つ目の画像）
ページ１（２つ目の画像）
ページ２（３つ目の画像）

という３つのページの構成になります。

次に「random」の定義。前述した最初に表示される画像を毎回違う画像にする為に、「Math.round( Math.random()*lastPage );」という関数で、0~2（lastPageの数）の乱数を入れています。ここで作った乱数を使って、最初のページとして割り当てるという仕組みです。

最後に「nextPage」の定義。最初にも説明したように、今回の構造上の仕組みとして、３枚の画像をピッタリと重ねて表示した上で、一番上の画像をfadeOutして消す事により、次の画像（nextPage）がクロスフェードして見えるという仕組みなので、３枚の画像を重ねる順番(z-index)を操作する必要があります。そこで一番上の画像の次である２番目の画像を「nextPage」という名前で定義します。こちらも値はのちほど設定します。

(2)初期画像をランダム設定し、次の画像を設定

page=random
if(page === lastPage){
nextPage = 0;
}else{
nextPage = page+1;
};

前述した、一番最初の画像をランダムにする為に作った「random」変数を「page」に代入します。これで画面をロードした時のpage変数の初期値として0~2の乱数が入ります。そしてさらにnextpageは単純にpageの次の数字という事で、「page+1」でいいのですが、もし乱数で選ばれたページが最後のページである「2」だった場合、次のページは3ではなく0にならないといけないので、if文で「page === lastPage」の時は「nextPage=0」を代入しています。

(3)画像の重なり順の初期表示

$("#slide img").css("z-index","-3");
$("#slide img").eq(nextPage).css("z-index","-1");

前述したとおり、画像の重なり順（z-index）を操作する事で、画像を切り替えます。今回は数字の見ため上わかりやすくする為に一番上の画像を「z-index:-1;」それに続き「z-index:-2;、z-index:-3;」という順番にしたいと思います。

最初の「$("#slide img").css("z-index","-3");」の記述で、一旦全部の重なり順を「z-index:-3;」にリセットした上で、次の記述「$("#slide img").eq(nextPage).css("z-index","-1");」で「nextPage」を一番上にします。この「nextPage」を一番上にする理由は、少し混乱しそうなところなのでのちほどゆっくり説明します。

(4)ページ切換関数

function changePage(){
　//まず全部最背面へ
　$("#slide img").css("z-index","-3");
　//pageを最前面へ
　$("#slide img").eq(page).css("z-index","-1");
　//nextPageを２番目へ
　$("#slide img").eq(nextPage).css("z-index","-2");
　//毎回全部display blockする
　$("#slide img").css("display","block");
　//最前面のpageをfadeOutすると２番目nextPageが見えてくる
　$("#slide img").eq(page).fadeOut(2500);
};

ここでは、changePage()という「画像を切替える時に行う動作」を関数化します。これまでにつくった「page」を一番最前面に移動、「nextPage」をその次に移動して、最前面の画像をfadeOutさせるという動きです。

「$("#slide img").css("z-index","-3");」これでまず、画像のz-indexを一旦全部-3にします。次に「$("#slide img").eq()」のeq()にpageを入れます。$("#slide img").eq(page)は常に一番最前面に移動する画像にしたいので「$("#slide img").eq(page).css("z-index","-1");」とします。同様に、次に表示する画像の「nextPage」は、$("#slide img").eq(nextPage).css("z-index","-2");という記述で、「z-indexを-2」にします。

毎回最前面の画像がfadeOutで消える事になるので、毎回「$("#slide img").css("display","block");」ですべて表示してあげます。

そして最後に「$("#slide img").eq(page).fadeOut(2500);」で「最前面のpage」をfadeOutしてchangePage()関数は終わりです。

(5)カウントアップ関数

そして次にcountUp()という関数を作成します。pageとnextPageをカウントアップさせた上で、changePage()関数を走らせるという関数で、このあとに出て来る「setInterval」という関数を使って、このcountUp()関数を何度も呼び出して、画像を切替えていくメインの動作になります。

条件分岐を使って、通常の場合は「page ++;」でカウントアップし、nextPageはpageに１をプラス。pageが最後のページの場合は「if(page === lastPage)」pageに0を代入しnextPageは1を代入。nextPageが最後のページの場合は「if(nextPage===lastPage)」nextPage に0を代入、pageは通常どおりpage ++でカウントアップさせる動作をさせます。全ての条件で、さきほど作った「changePage();」関数を走らせます。

(6)任意の秒間隔でイメージ切換の発火設定

var Timer;
function startTimer(){
　Timer =setInterval(function(){
　　countUp();
　},4000);
};

//～秒間隔でイメージ切換の停止設定
function stopTimer(){
　clearInterval(Timer);
};

//タイマースタート
startTimer();

最後に任意の秒間隔で発火する仕組みを作ります。これは「setInterval」という既存の関数で、決まりごととして覚えましょう。

今回の場合4000ミリ秒（４秒）間隔で発火する仕組みであり、このタイミングでさきほど作った「countUp();」関数を走らせるとついに完成です！！

画面ロード時に「nextPage」を一番上にする理由

さきほど保留にした画面ロード時に「nextPage」を一番上にする理由を説明します。頭の中でゆっくりイメージしてください。まず画面がロードした時点で乱数が作成され、仮に乱数が0になったとすると、「page=0」「nextPage=1」となります。画面をロードした時点ではchangePage関数は走りません。なので初回のインターバルが発動する時に消される画像を一番上に持ってくる必要があります。それがnextPageである「1」になるのです。
初回のインターバルが走ると、pageがプラス１された上で、changePage関数が走ります。つまりpage=1になった上でpage=1の画像がfadeOutされるという仕組みを作りたいので、画面ロード時に「nextPage=1」を最前面にするという事です。