jQueryで簡単な画像のスライドショー《slideswitchを勝手に解説》


  • 公開:
  • 更新:
  • 編集:
概要 ▶ 出典:jquery「slideswitch」で簡単にスライドショーを実装|衆jQueryのスライドショーのプラグインって色々ありますね。会社のサイトでは様々なサイトで紹介されているプラグインほど大がかりなものはなくても良いかな、と思って「jquery「slideswitch」で簡単にスライドショーを実装|衆」に掲載されているスクリプトを使用しています。ありがとうございます。今回はこのスクリプトを勝
20120409-jQueryで画像スライドショー-00


jQueryのスライドショーのプラグインって色々ありますね。

会社のサイトでは様々なサイトで紹介されているプラグインほど大がかりなものはなくても良いかな、と思って「jquery「slideswitch」で簡単にスライドショーを実装|衆」に掲載されているスクリプトを使用しています。ありがとうございます。


今回はこのスクリプトを勝手に解説します。

画像のスライドショーをするjQueryスクリプトについて

jquery「slideswitch」で簡単にスライドショーを実装|衆」で書かれているスクリプトは以下の通りです。

とてもシンプル。
■HTML

「head」に記述するコード
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<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}, 2000, function() {//(2000は画像が表示されるまでにかかるミリ秒)
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );//(5000は次の画像に切り替わるまでのミリ秒)
});
</script>

「body」内に記述するコード
<div id="slideshow">
<img src="画像1" alt="" class="active" />
<img src="画像2" alt="" />
<img src="画像3" alt="" />
</div>


■CSS

#slideshow {
position:relative;
width:500px;
height:320px;
}
#slideshow img {
position:absolute;
top:0;
left:0;
z-index:8;
}
#slideshow img.active {
z-index:10;
}
#slideshow img.last-active {
z-index:9;
}
jquery「slideswitch」で簡単にスライドショーを実装|衆

ただシンプルに書いているので、ぱっと見で何がなにやらわからないのでした(笑)。


簡単なスクリプトの解説

順に見ていきましょう。

先に書いておきますが$activeには現在表示している要素、$nextには次に表示される要素が代入されます。
また今回の「要素」という言葉はほとんどが「画像」のことです。


(1)まずimgタグで「active」というclassが付いている要素を$activeという変数に代入します。(なんで$を頭に付けているのかは謎…)
var $active = $('#slideshow img.active');


(2)if文で$activeの中身がない場合(lengthが0)、$activeに最後のimgを代入します。 
if ( $active.length == 0 ) $active = $('#slideshow img:last');


(3)$activeの次にある兄弟要素を「.next()」で探して、該当する要素があれば、その要素を$nextに代入し、そうでない場合はimgの最初の要素を代入します。
var $next = $active.next().length ? $active.next() : $('#slideshow img:first');


(4)$activeの要素に「last-active」というclassを付けます。
$active.addClass('last-active');


(5) $nextの要素の透明度を0に設定し、「active」というclassを付けます。そして2000ミリ秒掛けて透明度を1に変化させ、それが終わったら(コールバックで)「active」と「last-active」というclassを削除します。
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 2000, function() {//(2000は画像が表示されるまでにかかるミリ秒)
$active.removeClass('active last-active');
});


ここまでがスクリプトの簡単な解説です。
スクリプトでわかりづらい点をもう少し書いてみます。


(3)あたりの理解が難しいですね…。
三項演算子を使用しているのですが、書き直せばこうなります。
if ($active.next().length) {
$next = $active.next();
}else{
$next = $('#slideshow img:first')
}

何個かあるimg要素で最後の要素に「active」というclassが付いていた場合、次の要素を.next()で取得しようとしてもありませんので、img要素の最初の要素を$nextに代入しています。

 
(4)はlast-activeというclassを付けてz-indexを操作しています。
z-indexは数字が大きいほど前面に配置されます。activeというclassではz-indexが10、last-activeというclassではz-indexが9なので、activeのclassが付いた要素の方が前面に来ることになりますね。
classが付いていない要素はcssでz-indexが8と設定されています。
つまりactiveのclassが付いていた要素(z-indexが10)を、z-indexが9の状態にして、1枚分背面に移動しています。
 

(5)では次に表示させる画像である$nextの透明度を0、つまり何も見えない状態にして、activeのclassを付けることで、現在表示されている画像の前面に次に表示される画像が乗っかります。
そして段々透明度を変化させます。すると段々下にある現在表示している画像の$activeが見えなくなっていきます。

 .animateの中にあるfunctionは、透明度の変化のアニメーションが終了したら実行後される命令です。

$next.animate({opacity: 1.0}, 2000);
$active.removeClass('active last-active');

でも同じ動作をするのでは…と思いますがanimateの命令が終了するのをJavaScriptが待たずに次の行の処理をするので動作が変わってしまいます。

このためanimateの3つめの引数にfunctionを入れてアニメーション終了後に実行したい命令を入れるのです。

ここでは現在表示している$activeの要素が$nextの透明度の変化によって見えなくなったため、「active」「last-active」のclassを削除することでz-indexが8の状態に戻して、さらに背面に移動しているのです。


以上が解説になります。


わかったようなわからないような…な解説かもしれませんがわからない点があればコメントをお願いします。
それでは。


追記(2012/10/06)

スライドショーの画像にリンクを付けると動かないので修正したものを作りました。
こちらもどうぞ!

カテゴリー:

このページをぜひシェアしてください

こんな記事も読まれています

リアクションやコメントをどうぞ