少々説明が必要かもしれませんが、ご了承ください。明確に説明していない場合は、事前にお詫び申し上げます。
クライアント プロジェクト用に jQuery Slider (wordpress プラグイン) を構築しており、次の機能が含まれています。
- スライドのグループは一度に 1 グループずつ読み込まれます
- 再生/一時停止
- 次のスライド/前のスライド
- 次のグループ/前のグループ
- 自動再生
タイトル/説明の組み合わせが 1 つだけのスライドの「グループ」があるという点で、少し異なります。次に、各グループの異なるスライド間だけでなく、グループ自体もナビゲートします。
私の問題は、スライドショーの自動実行を一時停止して再開した後、setTimeout() 自体が 2 倍になったかのように、next_slide() アクションが 2 回実行される (フェードアウト/フェードイン、フェードアウト/フェードイン) ことです。 .
編集：以前考えていたように、再生/一時停止の後だけでなく、 next_slide() アクションが実行されるたびに発生するようになりました。スライド番号は進みませんが、同じ画像を 2 回フェードします。同じ画像を 4 回まで積み上げましたが、その理由がわかりません。混乱をお詫び申し上げます。
私の .live('click') イベントが単純に next_slide() を呼び出しているため、スタックしている可能性がありますか?
注- フロントエンド ボタンと set_information 関数を使用して関数をトリガーするための .click イベントなど、読みやすくするためにいくつかのコードを削除しました。私が知る限り、それらは私の問題の原因ではありません。
どんな助けでも大歓迎です。next_slide() 関数のダブル アクションの原因は何ですか? 他の面でも私のコードを自由に批評してください。完璧にはほど遠いことを私は知っています:
function build_slideshow(grouplist){
var group_array = jQuery.parseJSON(grouplist); // parse AJAX returned JSON
var n = 0; //group counter
var x = 0; //slide counter
var length = group_array.length - 1; //amount of groups
var count; // number of slides in group
var size; // size of window (to pull proper image sizes)
var autorun = null;
window_size(); // set size variable for later use
slideshow_init(); //start the slideshow
/* ------- FUNCTIONS -------- */
/*
checks window.width for AJAX call
*/
function window_size(){
window_size = $j(window).width();
switch(true){
case(window_size > 980):
size = 'large';
break;
case(window_size > 480 && window_size < 980):
size = 'med';
break;
case(window_size < 480):
size = 'small';
break;
}
}
function slideshow_init(){
set_information(); //places Title, Desc, and Slider nav buttons
get_slides(group_array[n].id); //builds slideshow for group
}
function get_slides(group_id){
$j.post(myAjax.ajaxurl, {action:"get_slides_list", groupid:group_id, size:size}, function(result){
slide_data = jQuery.parseJSON(result);
count = slide_data.length;
if(autorun) clearTimeout(autorun); //resets the setTimeout from previous group
x = 0; //resets the counter from previous group
$j('.slideshow div').hide();
$j('.slideshow div').html(slide_data[x]).fadeIn(700); //loads first slide
if(play == true){ //possible that user paused the slideshow last group
setTimeout(slideshow_autorun, 6000); //autoruns if not
}
});
}
function next_slide(){
x++;
(x == count) ? x = 0 : x = x; //loops to front if last slide
$j('.slideshow div').fadeOut( 700 , function() {
$j(this).html(slide_data[x]);
}).fadeIn(700);
}
function previous_slide(){
x--;
(x < 0) ? x = (count - 1) : x = x; // loops to back if first slide
$j('.slideshow div').fadeOut( 700 , function() {
$j(this).html(slide_data[x]);
}).fadeIn(700);
}
function next_group(){
n++;
(n > length) ? n = 0 : n = n; //loops to front if last group
slideshow_init();
}
function previous_group(){
n--;
(n < 0) ? n = length : n = n; //loops to back if first group
slideshow_init();
}
function play_slideshow(){
play = true;
slideshow_autorun();
}
function pause_slideshow(){
if(autorun) clearTimeout(autorun);
play = false;
}
function slideshow_autorun(){
if(play == true){
next_slide();
autorun = setTimeout(slideshow_autorun, 6000);
}
}
}