横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
4画面のカルーセルパネルを自動的にスライドさせる
setInterval(function) はid要素(#b3107Next)を5秒間隔でクリック動作の処理を行なう。
動作; 5秒間隔で画像を表示を繰り返す。
自動表示処理は先進表示キー、
後退表示キー押下でキャンセル(clearInterval(timerID))される。
jQueryの書き方 |
/* -----------------------------------------* //31-07) 1.カルーセルパネルを自動的にスライドさせる * -----------------------------------------*/ $("#move_3107Inner").css("width",620*$("#move_3107Inner ul.column").size()+"px"); $("#move_3107Inner ul.column:last").prependTo("#move_3107Inner"); $("#move_3107Inner").css("margin-left","-620px"); //後退キー処理 $("#move_3107Prev").click(function(){ $("#move_3107Next,#move_3107Prev").hide(); $("#move_3107Inner").animate({ marginLeft : parseInt($("#move_3107Inner").css("margin-left"))+620+"px" } ,"slow" ,"swing" ,function(){ $("#move_3107Inner").css("margin-left","-620px") $("#move_3107Inner ul.column:last").prependTo("#move_3107Inner"); $("#move_3107Next,#move_3107Prev").show(); }); }); //前進キー処理 $("#move_3107Next").click(function(){ $("#move_3107Next,#move_3107Prev").hide(); $("#move_3107Inner").animate({ marginLeft : parseInt($("#move_3107Inner").css("margin-left"))-620+"px" } ,"slow" ,"swing" ,function(){ $("#move_3107Inner").css("margin-left","-620px"); $("#move_3107Inner ul.column:first").appendTo("#move_3107Inner"); $("#move_3107Next,#move_3107Prev").show(); }); }); //自動前進キー処理 var timerID = setInterval(function(){ $("#move_3107Next").click(); },5000); //自動キーのキャンセル処理 $("#move_3107Prev img,#move_3107Next img").click(function(){ clearInterval(timerID); }); |
---|---|
cssの書き方 |
/*---------------------------------------- 31-07) 1.カルーセルパネルを自動的にスライドさせる ------------------------------------------ */ #move_3107Wrap{ margin:10px auto; width:620px; height:135px; padding:5px; background:url("../images/ani_background.gif"); position:relative; } #move_3107Prev{ position:absolute; top:65px; left:-8px; cursor:pointer; } #move_3107Next{ position:absolute; top:65px; right:-8px; cursor:pointer; } #move_3107{ width:100%; height:100%; overflow:hidden; } #move_3107Inner ul.column{ width:605px; height:105px; padding:15px 0 15px 15px; list-style-type:none; float:left; } #move_3107Inner ul.column li{ float:left; margin-right:10px; display:inline; } #move_3107Inner ul.column li img{ border:none; } |
HTMLの書き方 |
<div id="move_3107Wrap"> <p id="move_3107Prev"><img src="btn_prev.gif" alt="前へ" /></p> <p id="move_3107Next"><img src="btn_next.gif" alt="次へ" /></p> <div id="move_3107"> <div id="move_3107Inner"> <ul class="column"> <li><a href="#"> <img src="photo1_thum.jpg" alt="" /></a></li> <li><a href="#"> <img src="photo2_thum.jpg" alt="" /></a></li> <li><a href="#"> <img src="photo3_thum.jpg" alt="" /></a></li> <li><a href="#"> <img src="photo4_thum.jpg" alt="" /></a></li> </ul> <ul class="column"> <li><a href="#"><img src="photo5_thum.jpg" alt="" /></a></li> <li><a href="#"><img src="photo6_thum.jpg" alt="" /></a></li> <li><a href="#"><img src="photo7_thum.jpg" alt="" /></a></li> <li><a href="#"><img src="photo8_thum.jpg" alt="" /></a></li> </ul> <ul class="column"> <li><a href="#"><img src="photo9_thum.jpg" alt="" /></a></li> <li><a href="#"><img src="photo10_thum.jpg" alt="" /></a></li> <li><a href="#"><img src="photo11_thum.jpg" alt="" /></a></li> <li><a href="#"><img src="photo12_thum.jpg" alt="" /></a></li> </ul> <ul class="column"> <li><a href="#"><img src="photo13_thum.jpg" alt="" /></a></li> <li><a href="#"><img src="photo14_thum.jpg" alt="" /></a></li> <li><a href="#"><img src="photo15_thum.jpg" alt="" /></a></li> <li><a href="#"><img src="photo16_thum.jpg" alt="" /></a></li> </ul> </div> </div> </div> |