Blog

カルーセルパネル

2012.11.14Cat:プログラマー

今日はカルーセルパネルについて勉強しました。

HTMLのheaderに以下のコードを追加。

DEMO

JavaScriptの説明

★ パネル全体を格納する#carouselInnerの横幅を設定しています。
★ #carouselInnerの横幅は、表示領域の横幅(620px)*パネル(ul.column)の数です。

★ prependTo()を使って、最後のパネル(ul.column)を#carouselInnerの先頭位置に移動します。
★ css()でmargin-leftにネガティブマージン(マイナスの値を持つmargin値)を指定し、#carouselInnerを左方向に620pxずらします。
★ #carouselにoverflow:hiddenを設定しているため、ブラウザー上での表示は変わりませんが、パネルの先頭に最後のパネルが移動した状態になります。

★ Nextボタンにも同様の処理を設定します。右から左にパネルをスライドさせたいので、margin-leftには表示領域分だけ減算した値をせっていします。

★ 最初のパネル(ul.column)をappendTo()で#carouselInnerの最後に移動させます。
★ Preボタンの場合は逆の状態を作ります。

Author Profile

poe

本心でやれば、できないことはない!。。。。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ