jQuery Bilderslider mit einem "fade" Effekt

Für Webseiten benötigt man häufig einen Simplen Bilderslider, wie man den realisieren kann möchte ich hier beschreiben.

Als erstes benötigen wir die Bilder die im Slider angezeigt werden.

Die Bilder setzten wir in eine div Box mit der Klasse "slider_fade" zum besseren Formatieren und ansprechen via JavaScript. Alle Bilder in der Box positionieren wir absolute.

Slider Image 1 Slider Image 2
<div class="slider_fade">
	<img src="/pfad/zum/bild/image1.jpg" alt="Slider Image 1" />
	<img src="/pfad/zum/bild/image2.jpg" alt="Slider Image 2" />
</div>
.slider_fade {
	display: block;
	margin: 0px auto 0px auto;
	padding: 5px;
	width: 600px;
	height: 371px;
	background-color: #fff;
	position: relative;
	border-right: 1px solid #666;
	border-bottom: 1px solid #666;
	border-radius: 5px;
}
.slider_fade img {
	display: none;
	margin: 0px;
	padding: 0px;
	width: 600px;
	height: 371px;
	border: none;
	position: absolute;
	z-index: 1;
	top: 5px;
	left: 5px;
	border-radius: 5px;
}

Im Javascript fragen wir als erstes die Menge an Bilder ab, die sich in der Box befinden, so wissen wir, wenn alle vorhandenen Bilder angezeigt wurden und können von vorn beginnen.

jQuery(document).ready(function() {
	jQuery(".slider_fade").each(function() {
		var thisSlider = jQuery(this);
		var bilder_anzahl = jQuery(this).children("img").size();
		var i = Math.floor(Math.random() * bilder_anzahl);
		thisSlider.find("img").eq(i).css({"z-index": "2"}).show();
		setInterval(function() {
			thisSlider.find("img").eq(i).css({"z-index": "1"}).fadeOut(1000);
			i += 1;
			if(i == bilder_anzahl) i = 0;
			thisSlider.find("img").eq(i).css({"z-index": "2"}).fadeIn(1000);
		}, 5000);
	});
});

Was machen wir: Dadurch das alle Bilder auf derselben Ebene eins sind, können wir das nächste Bild in Ebene zwei anzeigen. Da dies transparent ist und wir dies langsam einblenden, sehen wir noch wie das letzte Bild ausgeblendet wird. Wir geben also immer dem nächsten Bild "z-index: 2" und dem letzten Bild "z-index: 1".

Wie immer würden wir uns über einen Like freuen. Hier der Download jquery_slider_fade.zip zum Downloaden und anpassen.

Kommentare

Kommentare können nur mit einer Verifizierten E-Mail-Adresse geschrieben werden, die E-Mail-Adresse muss einmal bestätigt werden.
@
(success)