横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
自動的に画像をスライド表示する
setInterval(function) はid要素(#b3106)を5秒間隔でクリック動作の処理を行なう。
動作; 5秒間隔でタブパネル画面の表示を繰り返す。
マウスで選択すると選択されたタブパネル画面を表示する。
表示データは外部ファイルを読み込み(.load())表示する。
jQueryの書き方 |
/*------------------------------------ */ //31-06) 簡単に更新できるタブパネル s3-4-3 /*------------------------------------ */ //初期処理 $("#info3106 p.panel").load($("#info3106 ul.tab li a.selected").attr("href")); //選択処理 $("#info3106 ul.tab li a").click(function(){ $("#info3106 ul.tab li a").removeClass("selected"); $(this).addClass("selected"); $("#info3106 p.panel").load($("#info3106 ul.tab li a.selected").attr("href")); return false; }); //自動動作処理 $("#b3106") .toggle(function(){ $("#info3106 ul.tab li a").removeClass("selected"); $("#info3106 ul.tab li a").eq(1).addClass("selected"); $("#info3106 p.panel").load($("#info3106 ul.tab li a.selected").attr("href")); } ,function(){ $("#info3106 ul.tab li a").removeClass("selected"); $("#info3106 ul.tab li a").eq(2).addClass("selected"); $("#info3106 p.panel").load($("#info3106 ul.tab li a.selected").attr("href")); }); --- 省略 --- var timerID1 = setInterval(function(){ $("#b3106").click(); },5000); |
---|---|
cssの書き方 |
/*------------------------------------------------------- 31-06. 簡単に更新できるタブパネル クラス要素 -------------------------------------------------------- */ .mode_3106{ width:500px; } .mode_3106 ul.tab{ padding:0; } .mode_3106 ul.tab li{ list-style-type:none; width:100px; height:40px; float:left; } .mode_3106 ul.tab li a{ outline:none; background:url("../images/ani_tab.jpg"); display:block; color:blue; line-height:40px; text-align:center; } .mode_3106 ul.tab li a.selected{ background:url("../images/ani_tab_selected.jpg"); text-decoration:none; color:#333; cursor:default; } .mode_3106 p.panel{ clear:both; border:1px solid #9FB7D4; border-top:none; padding:10px; text-indent:1em; color:#333; } |
HTMLの書き方 |
<div id="info3106" class="mode_3106 marLft50"> <ul class="tab"> <li><a href="../data/ani_JavaScript.txt" class="selected">JavaScript</a></li> <li><a href="../data/ani_CSS.txt">CSS</a></li> <li><a href="../data/ani_HTML.txt">HTML</a></li> <li><a href="../data/ani_jQuery.txt">jQuery</a></li> <li><a href="../data/ani_XHTML.txt">XHTML</a></li> </ul> <p class="panel"></p> </div> |