jQueryゼロから / スライドショー(複数の画像をフェードイン・フェードアウト表示)


ありがちな画像をフェードインで複数見せるヤツです。
画像をクリックするとリンク先に飛ぶようにします。
下記のようにリンク付き画像をまとめて指定することにします。

1
2
3
4
5
<div id="target">
    <a href="http://..."><img src="A.png" /></a>
    <a href="http://..."><img src="B.png" /></a>
    <a href="http://..."><img src="C.png" /></a>
</div>

ただ、画像を重ねた状態でのフェードイン・フェードアウトってリンクとか他のタグがあるとうまくいかないので、画像だけになるようにJavaScriptでいったん再構成します。再構成後のHTMLは最大でもフェードインとフェードアウトの画像が2枚ある感じ。
あ、ついでに #target ではこの2枚の画像が重なるように CSS で position: absolute; を指定しときます。

1
2
3
4
5
// #target img { position: absolute; } で画像が重なるように指定
<div id="target">
    <img src="..." /> <!-- フェードインする画像 -->
    <img src="..." /> <!-- フェードアウトする画像 -->
</div>

とりあえず、もとのHTMLの #target から <a> タグを取り出して、eachループ内で画像ファイル名とリンク先のURLを集めることにします。

1
2
3
4
5
6
$('#target').find('a').each(function(){
    // 画像とリンクを集めとく(ループ内でthisは<a>タグ)
    var image = $(this).find('img').attr('src');
    var link = $(this).attr('href');
   ...
});

さらにスライドショー表示用に、あらかじめ<img>タグにクリックでリンク先のURLを開くようにしときます(clickイベントを指定)。これを適当な配列に入れときます。

1
2
3
4
5
...
var slide = $('<img>').attr('src', image).click(function(){
    window.open(link);
});
slides[slides.length] = slide;

画像はHTMLで上から指定した順に3秒置きに表示することにします。
もともとあったタグは一度リセットしちゃいます。

1
2
3
4
5
6
var index = 0;
// リセットして1枚目の画像だけ表示
$('#target').html(slides[index].clone(true));
setInterval(function(){
// フェードイン・フェードアウト処理
}, 3000);

index は 0 〜 slides.length – 1 の範囲に収まるようにします。超えたら 0 にリセット。
slides に格納したデータは clone(true) で複製します。そうしないと、フェードイン・フェードアウトや削除したりで影響を受けてしまうので、オリジナルは加工しないようにします。
ちなみに clone(true) の様に引数に true があると、関連付けられたイベントも複製してくれます。これで、さっき追加したクリックイベントが引き継がれます。

1
2
3
4
5
6
7
8
9
10
11
12
13
// setInterval のループ内
$('#target > img').fadeOut('slow', function(){
    $(this).remove(); // 表示中の画像はフェードアウトして削除
});

index++;
if (index >= slides.length){
    index = 0;
}

// 次の画像を複製してフェードイン
var image = slides[index].clone(true);
$('#target').prepend(image.fadeIn('slow'));

先にフェードアウトさせる方が、表示中の画像が1つなので jQuery で指定しやすいです。($(‘#target > img’) で指定)
IEなど透過ができないブラウザもありますが(jQuery で $.support.opacity で判定できます)画像だけならfadeIn / fadeOut で対応できるので特に判定は入れません。

任意の画像を表示するインターフェイスを用意したり、スライドアニメーションを停止したりなどの機能もあるとそれっぽいですが、とりあえず基本部分だけ。
サンプル

2011.11.03追記
よくあるナビもつけてみた
ナビ付きスライドショー

「jQueryゼロから / スライドショー(複数の画像をフェードイン・フェードアウト表示)」への3件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です