jQueryスライドショーについて

質問

jQueryのスライドショーをサイトに配置しようと考え、下記URLのソースを
参考にしようとしています。皆様のお知恵をお貸しいただければ
幸いです。

http://jsdo.it/alicex/45Jv

実際に配置して、ブラウザチェックを行ったのですが、

(1)Chrome・Firefoxだと、スライドショーを配置しているページから離れて
戻ってきた際に、離れていた時間分だけスライドショーのメインイメージが暴走
して、勝手に動いてしまいます。

(2)また、サムネイル上でカーソルを高速で通過させると、
させた分だけ記憶してメインイメージが変化してしまいます。

(1)のバグを無くしたいのと、(2)は、今カーソルを合わせている
サムネイルに対応したメインイメージにすぐ変化して欲しいです。

jsに原因があると思うのですが、どの部分を修正すればよいでしょうか。

$(function() {
var thumb = $("#thumbnail");
var main = $("#main");

$("li:first-child",thumb).addClass("on").children("img").hide();
$("li:not(:first-child)",main).hide();

slider();

$("li",thumb).hover(function() {
$("li",thumb).removeClass("on").children("img").show();
$(this).addClass("on").children("img").hide();

num = $(this).index() + 1;
mainSelector = $("li:nth-child(" + num + ")",main);
mainSelector.fadeIn();
$("li",main).not(mainSelector).fadeOut();
});

});

function slider() {
$("#thumbnail li img").show();
$("#thumbnail li.on img").hide();

c = $("#thumbnail li.on").index() + 1;
c2 = $("#thumbnail li.on").index() + 2;
mainSelector = $("#main li:nth-child(" + c + ")");
$(mainSelector).fadeIn();
$("#main li").not($(mainSelector)).fadeOut();
$("#thumbnail li").removeClass("on");

if (c2 == 6) {
$("#thumbnail li:nth-child(1)").addClass("on");
}else{
$("#thumbnail li:nth-child(" + c2 + ")").addClass("on");
}

timerID = setTimeout('slider()',3000);
}

本来ならば作者様に質問する事がよいと思うのですが、
より多くの方からお知恵を拝借したいと考え、この場で質問
させていただきました。

何卒よろしくお願いいたします。

回答No.1

fujillin · ベストアンサー

内容はよく見ていませんが…

（1）は暴走しているのではなく、sliderの中でsetTimeoutで30秒ごとに再処理するようにしていることによるもので、その通りに実行されているだけではないのですか？

（2）については、確か、jQueryはアニメーションのキューを蓄積するようになっていたかとおもいますので、都度アニメーションを打ちきって、キューが溜まらないようにしてあげれば良さそうに思います。

内容を確認していませんし、未検証です。