Immer wieder stoßt man mal auf das Problem, wo man mit JavaScript gerne einen kleinen Film abspielen möchte. Dieser sollte wenn möglich auch noch in einer Endlosschleife laufen. Da man für dieses vermeintlich einfache Problem doch recht gern mal ein paar Stunden braucht, hab ich ein einfaches Skript dafür jetzt hier zur FREIEN Verfügung gestellt.
function cInfiniteCarousel(selector, duration) {
this.curchild = null;
this.selector = selector;
this.duration = duration;
this.DEBUG = false;
this.init = function() { this.curchild = $(this.selector + ":first"); };
this.start = function() { this.init(); this.run(); };
this.run = function() { if (this.curchild != null) { var self = this; setTimeout(function() { self.animate(); }, this.duration); } };
this.next = function() { this.curchild = this.curchild.next(); };
this.animate = function() {
// ----- MODIFICATION: Hier kann eine beliebige Aktion mit derm this.curchild Element durchgeführt werden ----
// this.curchild.animatefeatured(); => animatedfeature ist ein selbstgeschriebenes Plugin welches mir die Animation des Elements erledigt
// Letztes Element?
if (this.curchild.is(":last-child")) {
this.init();
if (this.DEBUG) console.log("RESTART");
} else {
this.next();
if (this.DEBUG) console.log("NEXT: " + this.curchild.find('img').attr("alt"));
}
this.run();
};
}
Als Übergabeparameter ist zum einen der Selektor, welcher ein Kind Element identifiziert, anzugeben. Der zweite Parameter ist die duration in Millisekunden.
$(document).ready(function() {
var featuredCarousel = new cInfiniteCarousel("ul li", 3000);
featuredCarousel.start();
});
Das wars, fertig ist die Endlosschleife.
Ergänzung:
Abbruchbedingungen und dergleichen könnt ihr euch dann individuell dazubauen.
