jQuery: スライダー型ショーケース

前置き

jQueryの講座で、どの様なサンプルを作成するかは未定の部分が多いのですが
Flash講座で作成したショーケースに相当するカリキュラムは実施しようと考えています。
サムネイル&ディテールのカリキュラムも考えたのですが、これはすでにLightBoxが
普及しているので、カリキュラム化はしない予定です。
google:Light Boxの検索結果
 
あとjQueryはフォームの扱いが得意のようなので(まだ試していないので分かりませんが..)
それを利用した診断系コンテンツの作成にも挑戦したいところです。Flash講座の中では
診断系コンテンツは最も難易度の高いものでしたが、htmlのフォームを利用すれば比較的
簡単に作成できそうな予感がするためです。
 
ということで、今回はFlash講座でも作成したスライダー型のショーケースを作成したいと
思います。今回はボタンでバナーをスライドさせます。別の講座で一定時間毎に切り替え
たりリンクを開く処理を紹介する予定です。
 
 

スライダー型ショーケース

以前にもフェードの紹介でシューケースは扱っていますが、今回は演出が異なります。
バナーは連結され1枚の長い画像になっています。これをスライドさせて表示する
バナーを切り替えます。

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

 
プログラムの考え方は文法や構文と異なり説明が大変ですし、有料の講座と差別化する必要からも
詳しくは説明はしません。しかしソースにはコメントを書いておくので、googleなどを頼りに
独学してみてください。ActionScript講座を受講された方はページスライダーと同じ考えで
作成されていることが理解できると思います。
 
それではソースを確認していきましょう。htmlには特筆すべき点はありません。しかしcssには
覚えておきべき処理が書かれています。それはdivの領域外を表示しないoverflow属性のhidden
設定です。ソースのcssで#photoAreaを確認してください。
こうすることでdivの外にはみ出した部分は表示されなくなります。

overflow : hidden ; 

つづいてjQuery。ページの管理は変数myPageで行っており、ページ番号は0から始める
ことに注意してください。ページを0から始めるとページ毎の座標は以下の式で算出できます。

座標の算出式
座標=ページ番号xバナー1枚の横幅x−1

 
ショーケースとして完成させる場合は、moveボタンのクリックではなく、一定時間ごとに
自動的に切り替わるようにしなければなりません。それについては別の機会に説明します。
 
ついでなので、次回はサムネイルでスライダーを移動させるサンプルを紹介します。
 
 
 

コメントを残す

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


− 7 = 二


*

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