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);
}
本来ならば作者様に質問する事がよいと思うのですが、
より多くの方からお知恵を拝借したいと考え、この場で質問
させていただきました。
何卒よろしくお願いいたします。
お礼
ありがとうございます!そんなライブラリがあるんですね! 初めて知りました・・・!参考URL、とても助かります! 勉強させていただきます。