Gibt es eine Möglichkeit, diese Diashow automatisch zu verschieben? Diese

Question

ist die Diashow, die wir verwenden:

http://www.littlewebthings.com/projects/blinds/

und das ist die JS-Datei:

http://www.littlewebthings.com/projects/blinds/js/jquery.blinds-0.9.js

Allerdings ist diese Diashow nicht eine Einstellung, die es durchlaufen macht jedes Bild automatisch. Sie müssen noch auf die Zahlen darunter klicken, um die Bilder zu sehen. Weiß jemand, was in den Javascript-Code hinzugefügt werden muss, um es jedes Bild automatisch durchlaufen zu lassen?

Danke!

Answer 1

Diese Lösung verwendet Schließungen und Rekursion.

var SlideChanger = function(seconds_each) { 
    var index = -1; 
    // on the first cycle, index will be set to zero below 
    var maxindex = ($(".change_link").length) - 1; 
    // how many total slides are there (count the slide buttons) 
    var timer = function() { 
    // this is the function returned by SlideChanger 
    var logic = function() { 
    // this is an inner function which uses the 
    // enclosed values (index and maxindex) to cycle through the slides 
     if (index == maxindex) 
     index = 0; // reset to first slide 
     else 
     index++; // goto next slide, set index to zero on first cycle 
     $('.slideshow').blinds_change(index); // this is what changes the slide 
     setTimeout(logic, 1000 * seconds_each); 
     // schedule ourself to run in the future 
    } 
    logic(); // get the ball rolling 
    } 
    return timer; // give caller the function 
} 

SlideChanger(5)(); // get the function at five seconds per slide and run it 

Was wir hier machen, die innere Funktion timer außerhalb der Funktion aussetzt, in dem sie definiert wurde (SlideChanger). Diese Funktion (timer) hat Zugriff auf die Variablen, die in SlideChanger (index und maxindex) definiert sind.

Jetzt, da wir die Variablen in der umgebenden Umgebung und eine Funktion für die Rückkehr zum Aufrufer eingerichtet haben, können wir die logische Engine in logic einrichten. Wenn logic ausgeführt wird, verwendet es index und maxindex, um zu bestimmen, welche Folie als nächstes angezeigt werden soll, zeigt die Folie und plant selbst, dass sie in Zukunft erneut ausgeführt wird.

Beim Aufruf ruft die zurückkehrende Funktion logic auf, um den Ball ins Rollen zu bringen. Dann wiederholt sich logic auf unbestimmte Zeit, indem es sich selbst so plant, dass es jedes Mal, wenn es ausgeführt wird, in Zukunft ausgeführt wird.

Also, um zusammenzufassen, rufen wir SlideChanger mit einem numerischen Argument x. Es gibt eine Funktion zurück, die nach dem Aufruf die Folie alle x Sekunden ändert.

Eine andere Möglichkeit, das gleiche Konzept zu schreiben.

(function(seconds_each) { 
    var index = -1; 
    // on the first cycle, index will be set to zero below 
    var maxindex = ($(".change_link").length) - 1; 
    // how many total slides are there (count the slide buttons) 
    return function() { 
    // this is the function returned by SlideChanger 
    var logic = function() { 
    // this is an inner function which uses the 
    // enclosed values (index and maxindex) to cycle through the slides 
     if (index == maxindex) 
     index = 0; // reset to first slide 
     else 
     index++; // goto next slide, set index to zero on first cycle 
     $('.slideshow').blinds_change(index); // this is what changes the slide 
     setTimeout(logic, 1000 * seconds_each); 
     // schedule ourself to run in the future 
    } 
    logic(); // get the ball rolling 
    } 
})(5)(); // get the function at five seconds per slide and run it 

JavaScript ist eine schöne Sprache mit vielen funktionalen Programmierkonstrukte wie Funktionen höherer Ordnung (Funktionen, die entweder Funktionen erstellen oder Funktionen als Parameter übernehmen) und anonyme Funktionen. Weitere Informationen finden Sie unter http://www.ibm.com/developerworks/web/library/wa-javascript.html

Answer 2

Nach einem kurzen Scan durch die Quelle habe ich keine integrierte API zum automatischen Vorrücken der Folien angezeigt. Sie können jedoch eine alternative Diashow, wie diese verwenden:

http://jquery.malsup.com/cycle/

Answer 3

Sie müssen lediglich einen Timer hinzufügen und das Ereignis "blinds_change" aufrufen. Das ist für mich in Ordnung.

Answer 4

ecounysis Lösung würde funktionieren, aber es ist unnötig kompliziert. Hier ist ein einfacher Weg mit setInterval, modulo, und es nicht in eine zusätzliche Funktion:

function startSlideshow(ms) { 
    var index = -1; 
    var count = $(".change_link").length - 1; 
    return setInterval(function() { 
     index = (index + 1) % count; 
     $('.slideshow').blinds_change(index); 
    }, ms); 
}