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

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

jQuery

31-11)　1.画像を右方向に自動的にスライド　前後画面の指定有り　右端動作開始

　

自動スライド表示(右端から動作開始表示)
画面のスライド時に表示画像の幅を100ｐｘにしてから、400ｐｘに拡大して表示する。

jQueryの書き方 /*　-----------------------------------------*
//31-11) 自動的にスライドさせる
* -----------------------------------------*/
//後退キー処理
$("#move_3111Prev").click(function(){
$("#move_3111").animate({
  "width": "100px"}
  ,"slow"
  ,"swing"
  ,function(){
    $("#move_3111").css("width","400px")
    $("#move_3111 li:last").prependTo("#move_3111");
  });
});
//前進キー処理
$("#move_3111Next").click(function(){
  $("#move_3111 li:first").appendTo("#move_3111");
});
//自動後退キー処理
var timerID = setInterval(function(){
  $("#move_3111Prev").click();
  },5000);
//自動キーのキャンセル処理
$("#move_3111Prev img,#move_3111Next img").click(function(){
  clearInterval(timerID);
});
;

ｃｓｓの書き方 /*--------------------------------------------
31-11)　自動的にスライドさせる
---------------------------------------------- */
#move_3111Wrap{
margin: 0 auto;
width: 400px;
height: 300px;
padding: 5px;
position: relative;
}
#move_3111Prev{
position:absolute;
top:65px;
left:-30px;
cursor:pointer;
}
#move_3111Next{
position:absolute;
top:65px;
right:-30px;
cursor:pointer;
}
#move_3111{
width:100%;
height:100%;
overflow:hidden;
}
#move_3111 li{
float:left;
margin-right:10px;
padding:15px 0 15px 15px;
list-style-type:none;
display:inline;
}
#move_3111 li img{
border:none;
}
HTMLの書き方 <div id="move_3111Wrap">
<p id="move_3111Prev"><img src="btn_prev.gif" alt="前へ" /></p>
<p id="move_3111Next"><img src="btn_next.gif" alt="次へ" /></p>
<div id="move_3111">
<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>

前へ

次へ

  • 1
  • 2
  • 3
  • 4
  • 5