copyright

株式会社アイネックスはソフトウェアの開発、検証ツールの支援企業です。

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

jQuery

31-01)　1. setInterval(); 自動スライドパネル

　

自動的に画像をスライド表示する
setInterval(function)　はｉｄ要素(#btn3101）を5秒間隔でクリック動作の処理を行なう。

動作；　5秒間隔でスライド画像の表示を繰り返す。

jQueryの書き方 /*------------------------------------ */
//31-01 自動パネル選択　setInterval()
/*------------------------------------ */
$("#btn3101")
  .toggle(function(){
  $("img#i3101").attr("src",$("#d3101 li a").eq(0).attr("href"));
  }
  ,function(){
  $("img#i3101").attr("src",$("#d3101 li a").eq(1).attr("href"));
  }
  ,function(){
  $("img#i3101").attr("src",$("#d3101 li a").eq(2).attr("href"));
  }
  ,function(){
  $("img#i3101").attr("src",$("#d3101 li a").eq(3).attr("href"));
});
var timerID1 = setInterval(function(){
  $("#btn3101").click();
},5000);
ｃｓｓの書き方 ----------
HTMLの書き方 <button id="btn3101" class="dispNone">
  画像を変更-自動パネル選択<
/button>
<p class="marLft50">
  <img id="i3101" src="../images/5.jpg" alt="花" />
</p>

<div id="d3101" class="dispNone">
  <ul>
    <li><a href="../images/1.jpg">山</a></li>
    <li><a href="../images/2.jpg">湖</a></li>
    <li><a href="../images/3.jpg">川</a></li>
    <li><a href="../images/4.jpg">山</a></li>
    <li><a href="../images/5.jpg">車</a></li>
  </ul>
</div>

花