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

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

jQuery

31-02)　1. 自動スライド＋選択処理

　

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

ｊQueryのﾌｨﾙﾀｰ：eq（番号）を指定する。
動作；　5秒間隔でスライド画像の表示を繰り返す。
　　　　　表示画面の文言を赤色で強調する。
　　　　　タイトル部をマウス選択すると、選択画像を表示する。

jQueryの書き方 /*------------------------------------ */
//31-02 自動スライド処理　setInterval()
/*------------------------------------ */
$("#b3102")
.toggle(function(){
$("img#i3102").attr("src",$("#d3102 li a").eq(1).attr("href"));
$("#d3102 li a").removeClass("selected");
$("#d3102 li a:eq(1)").addClass("selected");
}
,function(){
$("img#i3102").attr("src",$("#d3102 li a").eq(2).attr("href"));
$("#d3102 li a").removeClass("selected");
$("#d3102 li a:eq(2)").addClass("selected");
}
,function(){
$("img#i3102").attr("src",$("#d3102 li a").eq(3).attr("href"));
$("#d3102 li a").removeClass("selected");
$("#d3102 li a:eq(3)").addClass("selected");
//31-02 ｸﾘｯｸ処理 click()
$("#d3102 a").click(function(){
$("img#i3102").attr("src",$(this).attr("href"));
$("#d3102 li a").removeClass("selected");
$(this).addClass("selected");
return false;

---　省略 ----
});
var timerID1 = setInterval(function(){
$("#b3102").click();
},5000);
ｃｓｓの書き方 /*-------------------------------------------------------
31-02) 自動スライド＋選択処理
-------------------------------------------------------- */
.mode_3102{
margin: 10px 0 10px 50px;;
width: 400px;
}
.mode_3102 ul {
width:400px;
}
.mode_3102 li {
float:left;
width: 60px; /*ｾﾙの幅*/
height: 30px;
padding: 10px 0 0 20px;
font-weight: bold;
color: #446699;
list-style-type: none;
background-color: burlywood;
}
.mode_3102 li a.selected{
background:red;
}
HTMLの書き方 <button id="b3102" class="dispNone">画像を変更-自動パネル選択</button>
<div id="d3102" class="mode_3102">
<ul>
<li><a href="../images/1.jpg" class="selected">湖</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>
<p><img id="i3102" src="../images/1.jpg" alt="花" /></p>
</div>