横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
自動スライド表示(フェード方式)
画面のスライド時に表示画像の半透明(opacity: 0.5)にて、2.0秒後に通常画面(opacity: 1)とする。
jQueryの書き方 |
/* -----------------------------------------* //31-12) 自動的にスライドさせる * -----------------------------------------*/ //後退キー処理 $("#move_3112Prev").click(function(){ $("#move_3112").animate({opacity: 0.5}); $("#move_3112 li:last").prependTo("#move_3112"); $("#move_3112").animate({opacity: 1.0},2000); }); //前進キー処理 $("#move_3112Next").click(function(){ $("#move_3112 li:first").appendTo("#move_3112"); }); //自動後退キー処理 var timerID = setInterval(function(){ $("#move_3112Prev").click(); },5000); //自動キーのキャンセル処理 $("#move_3112Prev img,#move_3112Next img").click(function(){ clearInterval(timerID); }); |
---|---|
cssの書き方 |
/*-------------------------------------------- 31-12) 自動的にスライドさせる ---------------------------------------------- */ #move_3112Wrap{ margin: 0 auto; width: 400px; height: 300px; padding: 5px; position: relative; } #move_3112Prev{ position:absolute; top:65px; left:-30px; cursor:pointer; } #move_3112Next{ position:absolute; top:65px; right:-30px; cursor:pointer; } #move_3112{ width:100%; height:100%; overflow:hidden; } #move_3112 li{ float:left; margin-right:10px; padding:15px 0 15px 15px; list-style-type:none; display:inline; } #move_3112 li img{ border:none; } |
HTMLの書き方 |
<div id="move_3112Wrap"> <p id="move_3112Prev"><img src="btn_prev.gif" alt="前へ" /></p> <p id="move_3112Next"><img src="btn_next.gif" alt="次へ" /></p> <div id="move_3112"> <ul> <li><a href="#"><img src="1.jpg" alt="1" /></a></li> <li><a href="#"><img src="2.jpg" alt="2" /></a></li> <li><a href="#"><img src="3.jpg" alt="3" /></a></li> <li><a href="#"><img src="4.jpg" alt="4" /></a></li> <li><a href="#"><img src="5.jpg" alt="5" /></a></li> </ul> </div> </div> |