2012/11/14
カルーセルパネル
今日はカルーセルパネルについて勉強しました。
HTMLのheaderに以下のコードを追加。
|
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <div id="carouselWrap"> <p id="carouselPrev"><img src="images/prev.jpg" alt="前へ" /></p> <p id="carouselNext"><img src="images/next.jpg" alt="次へ" /></p> <div id="carousel"> <div id="carouselInner"> <ul class="column"> <li><a href="#"><img src="images/dog1.jpeg" /></a></li> <li><a href="#"><img src="images/dog2.jpeg" /></a></li> <li><a href="#"><img src="images/dog3.jpeg" /></a></li> <li><a href="#"><img src="images/dog4.jpeg" /></a></li> </ul> <ul class="column"> <li><a href="#"><img src="images/dog5.jpeg" /></a></li> <li><a href="#"><img src="images/dog6.jpeg" /></a></li> <li><a href="#"><img src="images/dog7.jpeg" /></a></li> <li><a href="#"><img src="images/dog16.jpeg" /></a></li> </ul> <ul class="column"> <li><a href="#"><img src="images/dog9.jpeg" /></a></li> <li><a href="#"><img src="images/dog10.jpeg" /></a></li> <li><a href="#"><img src="images/dog11.jpeg" /></a></li> <li><a href="#"><img src="images/dog13.jpeg" /></a></li> </ul> </div> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <style type="text/css"> *{ margin: 0; padding: 0; } #carouselWrap{ margin: 100px auto; width: 620px; height: 135px; padding: 5px; position: relative; } #carouselPrev{ position: absolute; top: 22px; left: -12px; cursor: pointer; } #carouselNext{ position: absolute; top: 22px; right: -18px; cursor: pointer; } #carousel{ width: 100%; height: 100%; overflow: hidden; border: 3px dotted #444444; } #carouselInner ul.column{ width: 605px; height: 105px; padding: 15px 0 15px 15px; list-style-type: none; float: left; } #carouselInner ul.column li{ float: left; margin-right: 10px; display: inline; } #carouselInner ul.column li img{ border: none; } </style> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | $(function(){ $("#carouselInner").css("width",620*$("#carouselInner ul.column").size()+"px"); $("#carouselInner ul.column:last").prependTo("#carouselInner"); $("#carouselInner").css("margin-left","-620px"); $("#carouselPrev").click(function(){ $("#carouselNext,#carouselPrev").hide(); $("#carouselInner").animate({ marginLeft : parseInt($("#carouselInner").css("margin-left"))+620+"px" },"slow","swing" , function(){ $("#carouselInner").css("margin-left","-620px") $("#carouselInner ul.column:last").prependTo("#carouselInner"); $("#carouselNext,#carouselPrev").show(); }); }); $("#carouselNext").click(function(){ $("#carouselNext,#carouselPrev").hide(); $("#carouselInner").animate({ marginLeft : parseInt($("#carouselInner").css("margin-left"))-620+"px" },"slow","swing" , function(){ $("#carouselInner").css("margin-left","-620px") $("#carouselInner ul.column:first").appendTo("#carouselInner"); $("#carouselNext,#carouselPrev").show(); }); }); }); |
JavaScriptの説明
|
1 | $("#carouselInner").css("width",620*$("#carouselInner ul.column").size()+"px"); |
★ パネル全体を格納する#carouselInnerの横幅を設定しています。
★ #carouselInnerの横幅は、表示領域の横幅(620px)*パネル(ul.column)の数です。
|
1 2 | $("#carouselInner ul.column:last").prependTo("#carouselInner"); $("#carouselInner").css("margin-left","-620px"); |
★ prependTo()を使って、最後のパネル(ul.column)を#carouselInnerの先頭位置に移動します。
★ css()でmargin-leftにネガティブマージン(マイナスの値を持つmargin値)を指定し、#carouselInnerを左方向に620pxずらします。
★ #carouselにoverflow:hiddenを設定しているため、ブラウザー上での表示は変わりませんが、パネルの先頭に最後のパネルが移動した状態になります。
|
1 | marginLeft : parseInt($("#carouselInner").css("margin-left"))-620+"px" |
★ Nextボタンにも同様の処理を設定します。右から左にパネルをスライドさせたいので、margin-leftには表示領域分だけ減算した値をせっていします。
|
1 | $("#carouselInner ul.column:first").appendTo("#carouselInner"); |
★ 最初のパネル(ul.column)をappendTo()で#carouselInnerの最後に移動させます。
★ Preボタンの場合は逆の状態を作ります。
Author Profile
スターフィールド編集部
SHARE