手動スライドショーを自動に変換する

Question

私はチュートリアルに続き、簡単な手動ループスライドショーを作成しました。私は前/次のボタンがクリックされていなくても自動的にスライドを変更するようにしようとしています。私は、「次へ」ボタンの自動クリックイベントの間に遅延を設定することによって、粗いアプローチを試みましたが、何らかの理由でそれを一度だけクリックして停止します。私の知識は非常に限られており、理解することはできません。これは、これまでのスクリプトです：

$(function() { 

    var ul = $(".slider ul"); 
    var slide_count = ul.children().length; 
    var slide_width_pc = 100.0/slide_count; 
    var slide_index = 0; 

    var first_slide = ul.find("li:first-child"); 
    var last_slide = ul.find("li:last-child"); 

    last_slide.clone().prependTo(ul); 

    first_slide.clone().appendTo(ul); 

    ul.find("li").each(function(indx) { 
    var left_percent = (slide_width_pc * indx) + "%"; 
    $(this).css({"left":left_percent}); 
    $(this).css({width:(100/slide_count) + "%"}); 
    }); 

    ul.css("margin-left", "-100%"); 

    $(".slider .prev").click(function() { 
    console.log("prev button clicked"); 
    slide(slide_index - 1); 
    }); 

    $(".slider .next").click(function() { 
    console.log("next button clicked"); 
    slide(slide_index + 1); 
    }); 

    function slide(new_slide_index) { 

    var margin_left_pc = (new_slide_index * (-100) - 100) + "%"; 

    ul.animate({"margin-left": margin_left_pc}, 400, function() { 

     if(new_slide_index < 0) { 
     ul.css("margin-left", ((slide_count) * (-100)) + "%"); 
     new_slide_index = slide_count - 1; 
     } 
     else if(new_slide_index >= slide_count) { 
     ul.css("margin-left", "-100%"); 
     new_slide_index = 0; 
     } 

     slide_index = new_slide_index 

    }); 

    } 

}); 

Answer 1

これは自動的にスライドさせるアプローチです...
ユーザーがprev/nextをクリックすると、定義済みの「アイドル」時間の自動機能が保持されます。

それはあなたのクリックハンドラに追加した2つの行が必要です。

var autoEnabled = true;    // ADDED 

$(".slider .prev").click(function() { 
    console.log("prev button clicked"); 
    slide(slide_index - 1); 
    autoEnabled = false;    // ADDED 
    disabledCount = 0;     // ADDED 
}); 

$(".slider .next").click(function() { 
    console.log("next button clicked"); 
    slide(slide_index + 1); 
    autoEnabled = false;    // ADDED 
    disabledCount = 0;     // ADDED 
}); 

そして、この周期的にスライドさせたり、それ自体を再有効化することができますかどうかをチェックします。

// ----------------- Automatic sliding interval with "idle time" to re-enable on user click 

var idleTime = 5000;  // Time without manual click to re-enable automatic sliding. 
var autoSlideDelay = 1000; // Time between each slide when automatic. 
var disabledCount = 0; 

var autoSlide = setInterval(function(){ 

    if(autoEnabled || disabledCount >= idleTime/autoSlideDelay){ 
    disabledCount = 0; 
    autoEnabled = true; 
    slide(slide_index + 1); 
    }else{ 
    disabledCount++; 
    } 
},autoSlideDelay); 

Answer 2

var break_auto_slide = false; 
function auto_silde() 
{ 
    if(break_auto_slide) 
    { 
     break_auto_slide = false; 
     return; 
    } 
    slide(slide_index + 1); 
    setTimeout(auto_silde,1000 /* time in ms*/); 
} 

setTimeoutは、ミリ秒単位で指定されたタイムアウトで関数を呼び出します。

変数break_auto_slide - 自動スライドを停止するにはtrueに設定します。次に関数が呼び出されると、新しいタイマーを設定せずに戻り、この変数をリセットして、自動モードを再びオンにすることができます。