jqueryで画像切り替え
この場をお借りして教えて頂ければ幸いです。
jqueryについて、今現在添付画像のようなサムネイルをマウスオーバーしますと、
メイン画像が切り替わるようなものをｊjqueryを使用して制作しました。
ここから、setIntervalを使用して画像が何もしなければ勝手に切り替わるように、
またマウスオーバーをしている際は切り替わらないように、そしてマウスアウトしたら
そこの画像から順にsetIntervalが開始されるようにしたいと思っております。
そこの作業が出来ず困っておりまして、是非ともお教え頂ければと思います。
今現在のhtml , css , jsの方は記載しておきます。※reset.cssは除きます。
<body>
<div id="wrap">
<div id="sec1">
<div id="photoBox">
<ul id="photo">
<li><img src="img/plan1.jpg" alt="食1" /></li>
<li><img src="img/plan2.jpg" alt="食2" /></li>
<li><img src="img/plan3.jpg" alt="食3" /></li>
</ul>
<ul id="thumb">
<li class="first"><img src="img/plan1_s.jpg" alt="" /></li>
<li><img src="img/plan2_s.jpg" alt="" /></li>
<li><img src="img/plan3_s.jpg" alt="" /></li>
</ul>
</div>
</div>
</div>
</body>
--------------------------------------------------------------------
div#wrap{
width:394px;
margin:0 auto;
}
div#photoBox{
width:394px;
height:391px;
padding:40px 0;
border-bottom:1px solid #CCC;
}
div#photoBox ul#photo{
width:394px;
height:295px;
padding-bottom:5px;
position:relative;
}
div#photoBox ul#photo li{
width:394px;
height:295px;
display:block;
position:absolute;
top:0;
left:0;
}
div#photoBox ul#thumb{
width:394px;
height:91x;
position:relative;
}
div#photoBox ul#thumb li{
float:left;
padding-left:5px;
}
div#photoBox ul#thumb li.first{
padding-left:0;
}
---------------------------------------------------------
(function(){
var photo = $('#photo').find('li');
var thumb = $('#thumb').find('li');
photo.hide().eq(0).show();
thumb.hover(function(){
$(this).stop().fadeTo('fast', 0.6);
photo.stop().fadeTo('fast', 0)
.eq($(this).index())
.stop().fadeTo('fast', 1);
},
function(){
$(this).stop().fadeTo('fast', 1);
});
})
![その他([地域情報] 旅行・レジャー) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c932_2_thumbnail_img_sm.png)
![その他([地域情報] 旅行・レジャー) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c932_4_thumbnail_img_sm.png)
お礼
この後姿の人が埼玉在住らしいです、直接の知り合いではないのですが・・・。 しかしマンションとの境目に柵らしきものがないので廃線ではないかと思うのですがね。。。