画像だけでなく、ボックスごと切り替えるスライドショーを作る方法
さて、前ページで作成した例のように「ただ画像を切り替える」だけではなく、画像にキャプションを付加したり、画像をリンクにしたりした状態で「ボックスを丸ごとを切り替える」スライドショーを作ってみましょう。 先ほどと同様に「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で迫力ある効果のスライドショーを作る方法」で解説しています。それらもぜひ併せてご参照下さい。
【関連記事】
