Umwandlung einer manuellen Diashow in automatische

Question

Ich folgte einem Tutorial und erstellte eine einfache manuelle Loop-Diashow. Ich versuche es so zu machen, dass es die Folie automatisch ändert, selbst wenn die Schaltflächen "Zurück" und "Weiter" nicht angeklickt werden. Ich habe einen groben Ansatz versucht, indem ich eine Verzögerung zwischen den automatischen Klickereignissen auf der "nächsten" Schaltfläche eingestellt habe, aber aus irgendeinem Grund klickt es nur einmal und stoppt dann. Mein Wissen ist sehr begrenzt und kann es nicht herausfinden, jede Eingabe wird geschätzt. Dies ist das Skript so weit:

$(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

Hier ist ein Ansatz, um es automatisch gleiten zu lassen ...
Aber wenn Benutzer auf prev/next klickt, hält es die automatische Funktion für eine definierte "Leerlauf" -Zeit.

Es muß zwei Zeilen zu Ihrem Klick-Handler hinzugefügt:

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 
}); 

Und das zyklisch schieben oder überprüfen, ob es sich wieder aktivieren kann.

// ----------------- 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 wird die Funktion in einem bestimmten Timeout in Millisekunden aufrufen.

Variable break_auto_slide - setzen Sie sie auf true, um die automatische Folie zu stoppen. Wenn die Funktion das nächste Mal aufgerufen wird, kehrt sie ohne Einstellung eines neuen Timers zurück und setzt diese Variable zurück, so dass der Auto-Modus wieder eingeschaltet werden kann.