jQuery: スライダー型ショーケース(分割型)

分割型のショーケース

前回までのショーケースはバナーが連結していたため、最後のバナーから最初のバナーに戻る際に
大きく移動しました。特に問題ないかもしれませんが、今回は連結されていないバナーを利用して
自然にループするスライダー型ショウケースを作成します。

sample : スライダー型ショウケース(分割)
http://www.designdrill.jp/jquery/04/04_separate_1.html
※moveボタンをクリックするとバナーがスライドして切り替わります。

 
今回も差別化のため、簡単な説明しかしません。まずhtmlとcssのポイントを説明します。
まずhtmlを確認して各バナー(photo_1〜photo_5)が配置されていることを確認してください。
分割型ではidを計算に利用することはないので、0から始める必要はありません。
これらのバナーを重ねて配置するために#photoArea 内の画像のcssを以下の様に設定しています。

#photoArea img{
	position:absolute;
	top:0px;
	left:0px;
}

つづいてjQueryの説明です。まず最初のバナー以外は表示したくないのでdivの外に配置して
隠しておきます(cssでhiddenにしてあるのでエリア外のバナーは見えません)。
その処理は以下の1行なのですが、セレクタにポイントがあります。この行のうち、まずは
gt(0)について説明します。リファレンス:gt(index)

$("#photoArea>img:gt(0)").css("left","600px");

これを利用すると指定した番号より大きい要素をすべて選択します(gtはgreater thanの略)。
今回は0を指定しているので、0より大きい要素を選択、つまり0(最初)以外の画像を選択
していることになります。

$("#photoAreaimg:gt(0)").css("left","600px");

つづいてについて説明します。今回のサンプルでは画像は
バナーしかありませんが、通常は他の画像もたくさんあります。これらバナー以外の画像を
選択しないようにしています。具体的には指定した要素内のものを選択します。
今回のケースでは>右側に#photoAreaとしてあるので、#photoArea内の要素を指します。
リファレンス:parent > child
 
つまり2つを合わせると#photoArea内の要素のうち0番目以降の画像を選択しています。
それらをcssメソッドで600pxの位置に配置しています。divの幅は600pxなので、600pxに
配置されたバナーはdivの範囲外で表示されません。
 
続くポイントは「古いバナーを消して、新しいバナーを表示する」部分なのですが、ここは
説明が難しく、講座との差別化のためにも説明は省きます。Flash講座を受講した方は
分割型コンテンツと同じ考えであることを確認してください。

 

使い分け

通常のスライダー型ショウケースと分割型の使い分けですが、各バナーに順番性があるもの、
例えば1ページ目から順番に読み進めていくBookタイプのコンテンツでは、通常のスライダー型
ショウケースを選択する方がよいでしょう。そのほうが各ページの位置関係も分かりやすく、
最後から最初に戻ることで、すべて読み切ったことにも気が付きます。
上記以外のケースでは分割型で良いと思います。特に時間で切り替えるタイプのショーケースでは
最後から最初に大きく戻る通常のスライダー型ショウケースよりも適しているでしょう。
 
次回は、これまたついでに、サムネイルで操作する分割型のショーケースを紹介します。
 
 
 

コメントを残す

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


6 × 二 =


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>