株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。

     横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

jQuery

31-07) 1.カルーセルパネル

 

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>

前へ

次へ