jsのスライドショーのボタンの時間制御について
jsのスライドショーについて質問です。
メイン画像とサムネール画像が連動していて、５秒間で次の画像及びサムネールに自動的にスライドするというものを作りました。そして、Prevボタンやnextボタンをつけ、クリックと、手動で次のスライドに移るようにしました。
これに、切り替わったスライドから５秒間止まり次の画像に切り替わるという設定を加えたいのですが、うまくいきません。自動再生中の４秒後にボタンをクリックすると、次のスライドが１秒で、また次のスライドに切り替わってしまうのです。
どうか方法を教えてください。
＜スクリプト＞
//自動再生
var timerID = setInterval(function(){
$('#thumbsNext').click();
},5000);
$('#gallery ul').hover(function(){
clearInterval(timerID);
}, function(){
timerID = setInterval(show, 5000); // マウスアウト時にスライドショーを再開
});
function show(){
$('#thumbsInner').animate({
marginLeft:parseInt($('#thumbsInner').css('margin-left'))-248+'px'
},'slow','swing',
function(){
$('#thumbsInner').css('margin-left','-248px');
$('#thumbsInner ul li:first').appendTo('#thumbsInner ul');
$('#thumbsList .active').next().click();
});
}
補足
説明足りずにすみません、 htmlソースのメイン画像の部分をaタグでくくっています。 〈a href="#"〉〈メイン画像〉〈/a〉