jQueryを使って、ふわっと画像が切り替わるスライドショーを作る方法
それでは「A Simple jQuery Slideshow」スクリプトを使って、ふわっと画像が切り替わるスライドショーを作成してみましょう。ここで記述するソースは、以下の3点です。- HTML： スライドショーとして表示したい画像(img要素)を必要なだけ列挙
- CSS： 各画像の「表示位置」と「重なり順」を調整するためのスタイルを記述
- JavaScript： 各画像を「ふわっと切り替える」ためのjQueryソースを記述
どれも数行の短い記述で済み、大半はコピー＆ペーストするだけで使えます。表示したい画像を用意してから、以下の順序で記述して下さい。
スライドショーとして表示したい画像を列挙するHTMLを記述
まずは、HTMLを記述します。下記のように、適当なid名を付けたボックスの中に、「スライドショーとして表示したい画像」(img要素)を列挙するだけです。とてもシンプルで簡単です。<p id="slideshow"> <img src="photo1.jpg" alt="画像1" class="active"> <img src="photo2.jpg" alt="画像2"> <img src="photo3.jpg" alt="画像3"> <img src="photo4.jpg" alt="画像4"> <img src="photo5.jpg" alt="画像5"> </p>■外側のボックスのid名
上記ではid名を「slideshow」としていますが、どんなid名を付けても構いません。これ以降に掲載するCSS・JavaScriptソースでは、ここで付けるid名が「slideshow」であることを前提にしています。従って、特に問題がなければ「slideshow」のままにしておくと、これ以降のコピー＆ペーストが楽になります。同一ページ内に複数のスライドショーを掲載したい場合は、id名が重複しないように別々の名称を付けて下さい。
■必要なだけimg要素を列挙
ここでは5枚の画像を表示させるため、5つのimg要素を列挙しています。何枚でも必要なだけ列挙して下さい。
■最初に表示させたい画像には、指定のクラス名を付加
列挙した画像のうち、最初に表示させたい画像には、「class="active"」というclass属性を付加しておきます。これを省略した場合は、(後述のCSSによってすべての画像が透明になってしまうため)ページの読み込み直後からスライドショーの処理が開始されるまでの間は、何も表示されなくなってしまいます。
各画像の「表示位置」と「重なり順」を調整するCSSを記述
次に、CSSを記述します。ここでのポイントは、positionプロパティを使った絶対配置と、z-indexプロパティを使った「重なり順」の指定です。
<style type="text/css">
#slideshow {
position: relative;
width: 640px; /* 画像の横幅に合わせて記述 */
height: 270px; /* 画像の高さに合わせて記述 */
}
#slideshow img {
position: absolute;
top: 0;
left:0;
z-index: 8;
opacity: 0.0;
}
#slideshow img.active {
z-index: 10;
opacity: 1.0;
}
#slideshow img.last-active {
z-index: 9;
}
</style>
上記のCSSソースは、HTMLで対象のボックスに付加したid名が「slideshow」である場合のものです。もし、id名を変更した際は、上記のCSSソース内の記述も同じように変更して下さい。id名を変更していなければ、太字で表示している箇所以外は全く修正する必要はありません。■外側のボックスの装飾： #slideshow { ～ }
外側のボックスには、画像の絶対配置の基準にするために、positionプロパティに値「relative」を指定しておきます。さらに、ボックスのサイズを画像サイズに合わせるよう、widthプロパティとheightプロパティを記述します。上記は、画像サイズが(横)640×(縦)270ピクセルの場合の記述です。実際に用意した画像サイズに合わせて修正して下さい。
■重なる順序を指定するz-indexプロパティ
上記のCSSソースでは、z-indexプロパティが3つ使われています。このz-indexプロパティは、(positionプロパティによって)重なり合うよう配置された要素の「重なる順番」を指定するプロパティです。値が大きいほど、上に重なる(＝手前に表示される)ことになります。
■内側に含めるimg要素の装飾： #slideshow img { ～ }
内側のimg要素には、「外側のボックスの端」を基準にして絶対配置するよう、positionプロパティに値「absolute」を指定しています。表示位置は、topプロパティとleftプロパティの値を共に「0」にしているので、「左上」にぴったり合うようになります。また、opacityプロパティに値0.0を指定し、透明にしています。これは、後からJavaScriptを使って透明度を徐々に下げていくことで、フェイドインの効果(＝「ふわっと」表示される効果)を出すためです。
■最初に表示される画像の装飾： #slideshow img.active { ～ }
最初に表示される画像(img要素)には、HTMLソース側で「active」クラスを付加しています。ここでは、z-indexプロパティの値を最も大きくして「一番上(＝最も手前)に表示される」ようにし、opacityプロパティに1.0を指定して「完全に不透明」(＝背後が全く透過しない状態)で表示されるように指定しています。
スライドショーのためのJavaScriptを記述
最後に、JavaScriptを記述します。このスクリプトは、名称にある通りjQueryを使いますから、先にjQueryの読み込みが必要です。HTMLのhead要素内などに以下の1行を記述して、jQueryを読み込んでおきましょう。<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>上記は、jQuery配布サイトが提供しているCDNサーバ(＝共有ライブラリを効率よく配信する仕組み)から、jQuery 1.12.4を直接読み込むソースです。もし、自サイト内にjQueryをアップロードしてあるなら、そちらを読み込んでも構いません。
■スライドショーを実現するjQueryソース
次に、以下のようにスクリプトを記述します。このソースが、ふわっと切り替わるスライドショーを実現するメインのJavaScriptソースです。記述場所は、先の(jQueryを読み込む)1行よりも後であればどこでも構いません。
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow img.active');
if ( $active.length == 0 ) $active = $('#slideshow img:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow img: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()", 3000 );
});
</script>
対象のボックスに付加したid名を記述している箇所が3箇所あります。もし、id名を「slideshow」以外の文字列に変えた場合は、上記ソース中の3箇所も同様に変更して下さい。変更していないのであれば、何も書き換えずにコピー＆ペーストするだけで構いません。■画像が切り替わる秒数の指定 (最後から3行目)
setIntervalは、一定時間ごとに処理を繰り返すメソッドです。上記では、3000ミリ秒ごとに、slideSwitch関数を呼び出すよう記述しています。この数値を変更すれば、スライドショーの更新頻度を調整できます。2500にすれば2.5秒ごとに画像が切り替わるようになりますし、5000にすれば5秒ごとに画像が切り替わるようになります。望みの更新頻度を「ミリ秒」で指定して下さい。
ふわっと切り替わるスライドショーの動作サンプル
上記のソースを記述したサンプルページを用意しています。ここでは5枚の画像が3秒ごとに切り替わります。実際にお使いのブラウザで動作を確認してみたい場合は、下記のリンクからサンプルページを表示して下さい。→ふわっと切り替わるスライドショーサンプルページ1
CSSもJavaScriptも、すべてHTMLファイル内に直接記述してあります。ソースを表示させて、コピー＆ペーストして使ってみる際の参考にして下さい。
jQueryで動作するスライドショーのサンプルページ
そこで最後に、画像だけでなく、ボックスを丸ごと切り替えたい場合の記述方法をご紹介いたします。
