サムネイルにマウスオーバーでメイン画像が切替るjs

質問

<script type="text/javascript">
//<![CDATA[
$(function(){
var sets = [], temp = [];
$("div.pickupArea div.pickupBox").each(function(i) {
temp.push(this);
if (i % 4 == 3) {
sets.push(temp);
temp = [];
}
});
if (temp.length) sets.push(temp);

$.each(sets, function() {
$(this).flatHeights();
});

n = 1;
timerID = setInterval("anime()", 6000);
$("ul.imgNav img:gt(0)").fadeTo(0,0.3);
});
function anime() {
now = n;
before = n == 0 ? 3 : n - 1;
n++;
thumbN = $("ul.imgNav a:eq(" + now + ") img");
thumbB = $("ul.imgNav a:eq(" + before + ") img");
url = $("ul.imgNav a:eq(" + now + ")").attr("href");
img = "http://xxxxxxxxxxxx/xxxx/images/img_main0" + n;
$("div.mainImg a").before("<a href='" + url + "'><img src='" + img + ".jpg' alt='' /></a>");
thumbB.fadeTo(1500,0.3);
thumbN.fadeTo(1500,1);
$("div.mainImg img:last").fadeOut(1500,function(){
$(this).remove();
$("div.mainImg a:last").remove();
});
if(n == 4){
n = 0;
}
}
//]]>
</script>

現在このようなスクリプトが入っており、
サムネイル４枚とメイン画像を（４枚中）１枚分だけ表示しているエリアがあり、メイン画像とサムネイルが自動で切り替わるようになっています。
このｊｓですと、サムネイルにマウスオーバーしてもメイン画像が切り替わらない仕様になっています。
サムネイルにマウスオーバーしても動くjsに改変するにはどこを修正すればよろしいでしょうか？

ご回答よろしくお願いいたします。
これをサムネイルに

回答No.1

fujillin · ベストアンサー

回答がないみたいなので…

HTMLやCSSが不明だし、何のライブラリを使っているのかも不明なのでよくわからないけれど、想像を大いにたくましゅうして回答してみると…

＞サムネイルにマウスオーバーしても動くjsに改変するにはどこを修正すればよろしいでしょうか？
基本的には、サムネイルにマウスオーバーした時のイベント処理を追加設定してあげればよいはず。

その後の動作がどうなるのかが不明なのでこれ以上はなんとも言えませんが、想像で考えられるのは、
1）マウスオーバーしている間だけメイン画像が変わっていて、マウスアウトすると元に戻って続きの動作。
2）マウスオーバーした時にメイン画像が変わり、マウスと関係なしにその後は一定時間ごとに切り替わる動作を継続。
この場合、マウスオーバーで切り替わったところの続きから順に表示される。又は、元の順序の続きで表示される。などの違いが考えられます。

1）の場合はマウスアウトの処理も必要なので、hoverなどを利用することになるかと。
いずれにしろ、イベント処理の中では一時的にsetIntervalで行なっている処理を止めてあげる必要があると思われます。
その後にどのようなタイミングとどのような順序で再開するのかは要求する内容によって変わってくるところです。
また、イベント時の画像入替えの処理とsetIntervalでの画像入替えの処理とは、ほぼ同じ内容になると予想されますので、その部分を独立の関数にしておいてどちらの処理からも利用できるようにしておく方が効率的と思われます。

その他、ご質問には関係ありませんが・・・

表示中の画像の番号を記憶させているようですが、画像要素にactiveなどのクラスを設定することで表示中の要素を識別できるようにしておけば、番号を記憶する必要もありませんし場合によってはactiveとそうでないものの表示をCSSで設定しておくことも可能です。（ご質問のコードではみなfadeで処理しているみたいなので、あまり関係ないですけれど）
番号を記憶しておくにしても、直接の画像名とせずにサムネイルの何番目という順番として利用するほうが、画像名の自由度は増加します。（現状は画像名の番号と一致させねばならない）
また、n=4と決め打ちになっていますが、サムネイルの要素数を調べてそれに応じて処理をするようにすることで、画像の数が限定されないコードにすることも可能です。
同様に、サムネイルとメイン表示の画像が同じ名前（又は○○_bigのように規則性のあるもの）であるなら、img = "～img_main0" + n;のようなことをしなくても、サムネイルのｓｒｃから生成するようにしておくことで汎用性が増すと考えられます。（リンク先のuriはその様にしてコピーしているようですが…）

よくわからないためかなり想像が入っていますので、違っていたならば御容赦。

お礼

お礼が遅くなりまして申し訳ありません。
とても参考になりました！
ありがとうございました。