横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
自動スライド表示(下端から動作開始表示)
画面のスライド時に表示画像の高さを50pxにしてから、300pxに拡大して表示する。
jQueryの書き方 |
/* -----------------------------------------* //31-10) 1.カルーセルパネルを自動的にスライドさせる * -----------------------------------------*/ //後退キー処理 $("#move_3110Prev").click(function(){ $("#move_3110").animate({"height": "50px"} ,"slow" ,"swing" ,function(){ $("#move_3110").css("height","300px") $("#move_3110 li:last").prependTo("#move_3110"); }); }); //前進キー処理 $("#move_3110Next").click(function(){ $("#move_3110 li:first").appendTo("#move_3110"); }); //自動後退キー処理 var timerID = setInterval(function(){ $("#move_3110Prev").click(); },5000); //自動キーのキャンセル処理 $("#move_3110Prev img,#move_3110Next img").click(function(){ clearInterval(timerID); }); |
---|---|
cssの書き方 |
/*-------------------------------------------- 31-10) 1.カルーセルパネルを1画像のみ自動的にスライドさせる ---------------------------------------------- */ #move_3110Wrap{ margin: 0 auto; width: 400px; height: 300px; padding: 5px; position: relative; } #move_3110Prev{ position:absolute; top:65px; left:-30px; cursor:pointer; } #move_3110Next{ position:absolute; top:65px; right:-50px; cursor:pointer; } #move_3110{ width:100%; height:100%; overflow:hidden; } #move_3110 li{ float:left; margin-right:10px; padding:15px 0 15px 15px; list-style-type:none; display:inline; } #move_3110 li img{ border:none; } |
HTMLの書き方 |
<div id="move_3110Wrap"> <p id="move_3110Prev"><img src="btn_prev.gif" alt="前へ" /></p> <p id="move_3110Next"><img src="btn_next.gif" alt="次へ" /></p> <div id="move_3110"> <ul> <li><a href="#"><img src="1.jpg" alt="1" />11</a></li> <li><a href="#"><img src="2.jpg" alt="2" />22</a></li> <li><a href="#"><img src="3.jpg" alt="3" />33</a></li> <li><a href="#"><img src="4.jpg" alt="4" />44</a></li> <li><a href="#"><img src="5.jpg" alt="5" />55</a></li> </ul> </div> </div> |