横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
自動スライド表示(通常表示)
jQueryの書き方 |
/* -----------------------------------------* //31-09) 1.カルーセルパネルを自動的にスライドさせる * -----------------------------------------*/ //後退キー処理 $("#move_3109Prev").click(function(){ $("#move_3109 li:last").prependTo("#move_3109"); }); //前進キー処理 $("#move_3109Next").click(function(){ $("#move_3109 li:first").appendTo("#move_3109"); }); //自動後退キー処理 var timerID = setInterval(function(){ $("#move_3109Prev").click(); },5000); //自動キーのキャンセル処理 $("#move_3109Prev img,#move_3109Next img").click(function(){ clearInterval(timerID); }); |
---|---|
cssの書き方 |
/*--------------------------------------------- 31-09) 1.カルーセルパネルを1画像のみ自動的にスライドさせる ---------------------------------------------- */ #move_3109Wrap{ margin: 0 auto; width: 400px; height: 300px; padding: 5px; position: relative; } #move_3109Prev{ position:absolute; top:65px; left:-30px; cursor:pointer; } #move_3109Next{ position:absolute; top:65px; right:-30px; cursor:pointer; } #move_3109{ width:100%; height:100%; overflow:hidden; } #move_3109 li{ float:left; margin-right:10px; padding:15px 0 15px 15px; list-style-type:none; display:inline; } #move_3109 li img{ border:none; } |
HTMLの書き方 |
<div id="move_3109Wrap"> <p id="move_3109Prev"><img src="btn_prev.gif" alt="前へ" /></p> <p id="move_3109Next"><img src="btn_next.gif" alt="次へ" /></p> <div id="move_3109"> <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> |