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

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

jQuery

31-14)　1.一覧選択の自動ｽﾗｲﾄﾞ

　

自動スライド表示(一覧選択)

jQueryの書き方
/*　---------------------------------------*
//　31-14) 1.パネルをマウスオーバーでスライドさせる
* -----------------------------------------*/
var i=1;
$("#mode_3113-list li").mouseover(function(){
//alert($("#mode_3113-list li").index(this));
i =$("#mode_3113-list li").index(this);
$("#mode_3113-list li").removeClass("current");
$("#mode_3113-list li").eq(i).addClass("current");
$(".mode_3113-img-item").css("display","none");
$(".mode_3113-img-item").eq(i).css("display","block");
});
/*　-----------------------------------------*
//　31-14) パネルを自動的にスライドさせる
* -----------------------------------------*/
$("#btn3113").click(function(){
  $(".mode_3113-img-item img").css("width","50px");
  $(".mode_3113-img-item img").css("height","50px");
  $(".mode_3113-img-item").css("display","none");
  $(".mode_3113-img-item").eq(i).css("display","block");
  $(".mode_3113-img-item img").animate(  {"width":"350px","height":"300px"},500);
  $("#mode_3113-list li").removeClass("current");
  $("#mode_3113-list li").eq(i).addClass("current");
  //listのスクロール処理
  if((i==0) || (i==3)){
    //alert("次ページlistスクロール　i=" +i);
    $("#mode_3113-list").animate({ scrollTop: $(".current:first").offset().top }, 'slow');
  }
  if( i++ == imax ){i=0;}
});
var timerID1 = setInterval(function(){
  $("#btn3113").click();
}  ,5000);
ｃｓｓの書き方 /*-------------------------------------------------------
31-14.　画像の表示部　
-------------------------------------------------------- */
#mode_3113-img{
width:350px;
float:left;
height:425px;
background-color:#000;
overflow:hidden;
position:relative;
}
#mode_3113-img img{
margin:0;
}
#mode_3113-img p{
padding:10px 8px;
font-size:14px;
line-height:20px;
/*background-color:#000;*/
color:#fff;
margin:0;
}
#mode_3113-img p span{
font-weight:bold;
}
#mode_3113-img p span a,
#mode_3113-img p span a:active,
#mode_3113-img p span a:visited{
color:#7d7137;
}
#mode_3113-img p span a:hover{
color:#d7cea8;
}
/*-------------------------------------------------------
31-14.　画像の選択部　
-------------------------------------------------------- */
#mode_3113-list{
float:right;
width:280px;
}
#mode_3113-list ul{
padding:0;
margin:0;
}
#mode_3113-list ul li{
border-bottom:dashed 1px #999;
padding:3px 3px 6px 17px;
_padding:3px 3px 3px 18px;
margin:0px 0px 0px 0px;
_margin:0px 0px 0px 0px;
height:47px;
}
* html #mode_3113-list ul li{
height:56px;
}
#mode_3113-list ul li h3{
font-size:13px;
line-height:14px;
font-weight:normal;
margin:0;
padding-top:4px;
}
#mode_3113-list ul li h3 a{
color: #000000;
}
#mode_3113-list ul li h3 span{
font-size:12px;
font-weight:normal;
color:#7d7137;
display:block;
}
#mode_3113-list ul li.current{
background:url("../images/feature-back.jpg") no-repeat scroll left center transparent;
font-weight:bold;
}
#mode_3113-list ul li.current h3{
font-weight:bold;
color:#7d7137;
}
#mode_3113-list ul li.current h3 a{
font-weight:bold;
color:#7d7137;
}
#mode_3113-list ul li.current h3 span{
font-weight:normal;
}
/*-------------------------------------------------------
31-14.　画像の選択　
-------------------------------------------------------- */
.mode_3113-img-item{
display:none;
left:0px;
top:0px;
position:absolute;
}
HTMLの書き方 <div id="mode_3113">
<div id="mode_3113-img">
<div class="mode_3113-img-item " style="display:block;">
<a href="motn31-02.html"><img src="../images/gval-001.jpg" alt="" width="350" height="305" /></a>
<p>札幌市時計台は　・・・</p>
</div>
<div class="mode_3113-img-item">
<a href="motn31-02.html"><img src="../images/gval-002.jpg" alt="" width="350" height="305" /></a>
<p>さっぽろ雪まつり　・・・</p>
</div>
<div class="mode_3113-img-item">
<a href="motn31-02.html"><img src="../images/gval-003.jpg" alt="" width="350" height="305" /></a>
<p>約4,500店ともいわれる　・・・</p>
---　省略　---
</div>
<div id="mode_3113-list">
<ul>
<li class="current">
<h3><a href="motn31-01.html"><span>[ ＪＲ札幌 ]</span>観光施設　</a></h3>
</li>
<li>
<h3><a href="motn31-02.html"><span>[ 大通公園 ]</span>「さっぽろ雪まつり</a></h3>
</li>
<li>
<h3><a href="motn31-03.html"><span>[ すすきの ]</span>今でも深夜　</a></h3>
</li>
</ul>
---　省略　---
</div>
</div>

札幌市時計台は、北海道大学の前身である札幌農学校の演武場として明治11（1878）年10月に建設されました。 演武場は生徒の兵式訓練や心身鍛錬の場であるとともに、入学式、卒業式など農学校の中央講堂として使用されました …»もっと読む

「さっぽろ雪まつり」「さっぽろライラックまつり」、「YOSAKOIソーラン祭り」などのイベント会場などのほか、夏のビアガーデンや盆踊り大会 、 冬の雪まつりやホワイトイルミネーションの会場としても使用され、札幌観光の顔ともいうべき …»もっと読む

約4,500店ともいわれる飲食店や娯楽施設がひしめく東京以北最大、日本3大歓楽街のひとつとして数えられる街、すすきの。 「ラーメン横丁」など、北海道を代表する味覚スポットも数多く、季節を問わず、多くの人で賑わっています。 …»もっと読む

明治9年、開拓使麦酒醸造所として発足したサッポロビール発祥の地に建てられた総合商業施設。 歴史的な赤レンガの建物を生かしてショッピングモール、レストラン、ホテル、フィットネスクラブなど、さまざまな施設を配置 …»もっと読む

赤レンガの開拓使館で工場直送の生ビールとジンギスカンを味わえるビール園。 広い敷地内には、大正元年製造の仕込み釜がある「ケッセルホール」「トロンメルホール」をはじめ、「ポプラ館」「ライラック」の他に …»もっと読む

雪印メグミルク株式会社の敷地内にあり、当時の雪印乳業が創業50周年を記念して建てた歴史館です。 ここは、大正15年に当時の雪印乳業が本格的にバターをつくり始めた場所でもあります。約850点の展示品が並ぶ館内では、創業当時から …»もっと読む

株式会社アイネックスの神奈川の敷地内にあり、当時の雪印乳業が創業50周年を記念して建てた歴史館です。 ここは、大正15年に当時の雪印乳業が本格的にバターをつくり始めた場所でもあります。約850点の展示品が並ぶ館内では、創業当時から …»もっと読む

株式会社アイネックスの横浜の敷地内にあり、当時の雪印乳業が創業50周年を記念して建てた歴史館です。 ここは、大正15年に当時の雪印乳業が本格的にバターをつくり始めた場所でもあります。約850点の展示品が並ぶ館内では、創業当時から …»もっと読む

株式会社アイネックスの関内の敷地内にあり、当時の雪印乳業が創業50周年を記念して建てた歴史館です。 ここは、大正15年に当時の雪印乳業が本格的にバターをつくり始めた場所でもあります。約850点の展示品が並ぶ館内では、創業当時から …»もっと読む

株式会社アイネックスの桜木町の敷地内にあり、当時の雪印乳業が創業50周年を記念して建てた歴史館です。 ここは、大正15年に当時の雪印乳業が本格的にバターをつくり始めた場所でもあります。約850点の展示品が並ぶ館内では、創業当時から …»もっと読む