画像だけでなく、ボックスごと切り替えるスライドショーを作る方法

さて、前ページで作成した例のように「ただ画像を切り替える」だけではなく、画像にキャプションを付加したり、画像をリンクにしたりした状態で「ボックスを丸ごとを切り替える」スライドショーを作ってみましょう。 先ほどと同様に「A Simple jQuery Slideshow」スクリプトを使いますが、今度は、「画像を表示するimg要素」ではなく、「ボックスを作るp要素」を対象にして表示を切り替えるように作ります。

以下の順で、HTMLソース・CSSソース・JavaScriptソースを記述して下さい。

スライドショーとして表示したいボックスを列挙するHTMLを記述

まずは、HTMLを記述します。適当なid名を付けたボックスの中に、スライドショーとして表示したい中身を列挙するのは先ほどと同様です。しかし、先ほどは「img要素を列挙」するだけでしたが、ここでは代わりに「ボックスを列挙」します。
<div id="slideshow">
   <p class="active">
      <a href="リンク先"><img src="photo1.jpg" alt="画像1"></a>
      キャプション1
   </p>
   <p>
      <a href="リンク先"><img src="photo2.jpg" alt="画像2"></a>
      キャプション2
   </p>
   <p>
      <a href="リンク先"><img src="photo3.jpg" alt="画像3"></a>
      キャプション3
   </p>
   <p>
      <a href="リンク先"><img src="photo4.jpg" alt="画像4"></a>
      キャプション4
   </p>
   <p>
      <a href="リンク先"><img src="photo5.jpg" alt="画像5"></a>
      キャプション5
   </p>
</div>
外側のボックスのid名
外側のボックス(ここではdiv要素)に、id属性を使ってid名を付加する点は前回と変わりありません。ここではid名を「slideshow」としていますが、同ページ内に存在する他のid名と重複しないように注意して下さい。他のid名に変えた場合は、以下のCSSソース・JavaScriptソースも修正する必要があります。

必要なだけボックスを列挙
スライドショーで切り替える「内側のボックス」は、ここではp要素を使って作っています。他の要素でも構いません。ただし、混在はできませんので、必ず同じ要素を使って列挙します。上記では5つほど列挙していますが、個数は自由です。必要なだけ列挙して下さい。

最初に表示させたいボックスには、指定のクラス名を付加
スライドショーが始まる前に、最初に表示させておきたいボックスには、「class="active"」というクラス属性を付加する必要があります。

各ボックスの「表示位置」と「重なり順」を調整するCSSを記述

次に、CSSを記述します。positionプロパティを使った絶対配置と、z-indexプロパティを使った「重なり順」の指定がポイントなのは前回と同様です。ボックスは標準では背後が透過してしまうため、背景色を付加しておくのを忘れないようにして下さい。
<style type="text/css">
#slideshow {
   position: relative;
   width:  640px; /* ボックスの横幅 */
   height: 300px; /* ボックスの高さ */
}

#slideshow p {
   position: absolute;
   top:  0;
   left: 0;
   z-index: 8;
   opacity: 0.0;
   margin: 0;
   background-color: white; /* ボックスの背景色(必須) */
   height: 300px; /* ボックスの高さ */
}

#slideshow p.active {
   z-index: 10;
   opacity: 1.0;
}

#slideshow p.last-active {
   z-index: 9;
}

#slideshow p img {
   width:  640px; /* 画像の横幅 */
   height: 270px; /* 画像の高さ */
   display: block;
   border: 0;
   margin-bottom: 10px; /* 画像下部の余白 */
}
</style>
positionプロパティでの「表示位置」の調整や、z-indexプロパティを使った「重なり順」の指定は、前ページで解説した通りなので、ここでは割愛します。詳しい説明は、前ページをご参照下さい。特に解説を読むことなく、ただソースをコピー&ペーストするだけでも問題はありません。

ボックスや画像のサイズ (width, heightプロパティ)
上記のソースは、画像サイズが(横)640×(縦)270ピクセルの場合の記述です。各所にあるwidthプロパティやheightプロパティの数値は、実際に使う画像のサイズや、ボックス内部に含める文字の量などに合わせて修正して下さい。

内側のボックスの装飾: #slideshow p { ~ }
スライドショーで丸ごと切り替えるボックス(内側のボックス)には、必ず background-colorプロパティを使って、背景色を付加して下さい。ボックスの背景色は標準では透明なので、背景色を指定しないままだと、「前のボックス」に含まれる文字がずっと表示され続けてしまい、複数の文字が重なって読めなくなります。

スライドショーで切り替える「内側のボックス」
スライドショーで切り替える「内側のボックス」は、上記ではp要素を使って作っています。もし、p要素以外の要素を使った場合は、上記のCSSソース内のセレクタ「p」を(内側のボックスとして使った要素名に)修正して下さい。

スライドショーのためのJavaScriptを記述

最後に、JavaScriptを記述します。先ほどと同様に、まずはjQueryを読み込みます。
<script src=""https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
次に、スクリプト本体を記述します。
<script type="text/javascript">
function slideSwitch() {
   var $active = $('#slideshow p.active');

   if ( $active.length == 0 ) $active = $('#slideshow p:last');

   var $next =  $active.next().length ? $active.next()
      : $('#slideshow p:first');

   $active.addClass('last-active');

   $next.css({opacity: 0.0})
      .addClass('active')
      .animate({opacity: 1.0}, 1000, function() {
         $active.removeClass('active last-active');
      });
}

$(function() {
   setInterval( "slideSwitch()", 2100 );
});
</script>
上記では、2.1秒毎に切り替わるスライドショーになります。前ページで既に解説した内容については、ここでは割愛します。詳しくは、前ページの解説もご参照下さい。

スライドショーで切り替える「内側のボックス」を作る要素名
スライドショーで切り替える「内側のボックス」は、ここではp要素を使って作っています。もし、p要素以外の要素を使った場合は、上記のJavaScriptソース内にある3箇所の「p」を(内側のボックスとして使った要素名に)修正するのを忘れないよう注意して下さい。

ボックスが丸ごとふわっと切り替わるスライドショーの動作サンプル

上記のソースを記述したサンプルページを用意しています。5枚の画像とキャプションが、2.1秒ごとに切り替わります。

ふわっと切り替わるスライドショーサンプルページ2

※CSSもJavaScriptも、すべてHTMLファイル内に直接記述してあります。ソースを表示させて、コピー&ペーストする際の参考にして下さい。

指定秒数毎に次の画像がフェイドインしてくる形で「ふわっと切り替わる」スライドショーの作成例

指定秒数毎に次の画像がフェイドインしてくる形で「ふわっと切り替わる」スライドショーの作成例



 

フェイドアウトとフェイドインを繰り返して、複数の画像がふわっと切り替わるスライドショーを作る方法

今回は、複数の画像が数秒間隔でフェイドアウト・フェイドインを繰り返す「ふわっと切り替わる効果のあるスライドショー」を作る方法をご紹介いたしました。ぜひ、活用してみて下さい。

なお、jQueryを使わないJavaScriptで作るスライドショーについては、記事「JavaScriptで画像のスライドショーを作成する方法」でも解説しています。また、もっと派手な表示効果を伴ってスライドショーを作る方法は、記事「Skitterで迫力ある効果のスライドショーを作る方法」で解説しています。それらもぜひ併せてご参照下さい。

【関連記事】



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。