こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

jqueryで画像切り替え

この場をお借りして教えて頂ければ幸いです。

jqueryについて、今現在添付画像のようなサムネイルをマウスオーバーしますと、
メイン画像が切り替わるようなものをjjqueryを使用して制作しました。

ここから、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);
});

})

投稿日時 - 2012-05-18 16:19:05

QNo.7482568

すぐに回答ほしいです

質問者が選んだベストアンサー

回答がないみたいですが・・・


こんな感じではどうでしょうか?
表示中のものをどこかに記憶しておくほうが簡単なので、class="active"のものが表示中ということにしています。
(全角空白は半角に)

$(function(){

 var photo = $('#photo li');
 var active = "active", intervalId, interval = 5000;

 var changeStart = function(){
  intervalId = setInterval(function(){
   var act = photo.filter("."+active).removeClass(active).stop().fadeTo('fast', 0).next();
   (act.length?act:photo.filter(":first-child")).addClass(active).stop().fadeTo('fast', 1);
  }, interval);
 }

 $("#thumb li").hover(
  function(){
   clearInterval(intervalId);
   photo.stop().removeClass(active).fadeTo('fast', 0)
    .eq($(this).index()).stop().addClass(active).fadeTo('fast', 1);
  },
  function(){ changeStart(); }
 );

 photo.hide().eq(0).addClass("active").show();
 changeStart();

});

投稿日時 - 2012-05-21 15:33:07

お礼

本当にありがとうございました。
こんなにもスマートに書く方法があるとは思いませんでした。
またactiveを使用する方法は知らなかったので非常に勉強になりました。
本当にどうもありがとうございました。

投稿日時 - 2012-05-22 20:11:47

このQ&Aは役に立ちましたか?

4人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問