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