横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
自動的に画像をスライド表示する
setInterval(function) はid要素(#b3103)を5秒間隔でクリック動作の処理を行なう。
jQueryの:nth-child擬似クラスに(番号)を指定する。
動作; 5秒間隔でスライド画像の表示を繰り返す。
表示画面の文言を赤色で強調する。
タイトル部をマウス選択すると、選択画像を表示する。
jQueryの書き方 |
/*------------------------------------ */ //31-03 自動スライド処理 setInterval() /*------------------------------------ */ $("#b3103") .toggle(function(){ $("img#i3103").attr("src",$("#d3103 li:nth-child(2) a").attr("href")); $("#d3103 li a").removeClass("selected"); $("#d3103 li:nth-child(2) a").addClass("selected"); } ,function(){ $("img#i3103").attr("src",$("#d3103 li:nth-child(3) a").attr("href")); $("#d3103 li a").removeClass("selected"); $("#d3103 li:nth-child(3) a").addClass("selected"); } ,function(){ $("img#i3103").attr("src",$("#d3103 li:nth-child(4) a").attr("href")); $("#d3103 li a").removeClass("selected"); $("#d3103 li:nth-child(4) a").addClass("selected"); } --- 省略 --- return false; }); var timerID1 = setInterval(function(){ $("#b3103").click(); },5000); |
---|---|
cssの書き方 |
/*------------------------------------------------------- 31-03) 自動スライド+選択処理 -------------------------------------------------------- */ .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> |