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

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

jQuery

31-08) 1.小さい画像を右方向に自動スライド

 

画像を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>