[HTML/CSS/JS/jQuery] Easy Image-Slider

[Ravenstorm]

Vor nicht all zu langer Zeit brauchte ich einen kleinen Slider, welcher Bilder, Text, und Bilder + Text abbilden kann. Das ganze ist eigentlich super einfach und benutzt lediglich einen Standard-Loop aus JavaScript und hier ist er:

HTML:

<div id="slider">
   <div>
     <img src="http://domain.com/picture1.jpg">
   </div>
   <div>
     <img src="http://domain.com/picture1.jpg">
Eine kleine Bildbeschreibung...
   </div>
   <div>
Oder vielleicht nur Text?
   </div>
</div>

Erklärung:

Wir benötigen ein Grundgerüst wie der Div-Container mit der id "slideshow" und dort drinnen brauchen wir ein weiteres Grundgerüst um in jeder anzeige eben Inhalt rein zu packen das sind die weiteren Div-Container

CSS:

#slider{ 
    position: relative; 
    width: 500px; 
    height: 500px; 
}

#slider> div { 
    position: absolute; 
}

Erklärung:

Lediglich eine kleine Festlegung des Designs.

JS:

$(document).ready(function(){
	$("#slider> div:gt(0)").hide();

	setInterval(function() { 
	  $('#slider> div:first')
		.fadeOut(1000)
		.next()
		.fadeIn(1000)
		.end()
		.appendTo('#slider');
	},  5000);
});

Erklärung:

DOM ready? Ja? Dann -> Alle Div-Elemente innerhalb der "slideshow"-ID mit einem größeren Index als 0 verstecken um sie gleich einblenden zu lassen.

Dann eine einfache JavaScript-Funktion benutzen "setInterval" auf 5 Sekunden gelegt und beim ersten Element beginnen ausblenden, nächsten nehmen, einblenden und das läuft bist zum Ende durch und setzt das ausblendende Element an das Ende des Sliders um so etwas wie eine Schlaufe zu generieren.

[єтєяηιту]

Sieht ja sehr professionell aus. ^^