jQuery Bilderslider mit einem "fold" Effekt

Hier möchte ich beschreiben, wie man Bilder mit einem "fold" Effekt überblendet. Dabei schieben wir das nächste Bild von rechts nach links über das letzte Bild. Im Gegensatz zum "fade" Effekt müssen wir jetzt auf die richtige Ausgangsposition des nächsten Bildes achten.

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

In der Ausgangsposition sind alle Bilder rechts außerhalb der Box ".slider_fold", mit "overflow: hidden" im css werden diese nicht angezeigt sind aber da. Die Bilder müssen in der Breite eines Bildes nach rechts positioniert werden. Diesen Stabel Bilder verändern wir mit jQuery so, dass das erste Bild random (zufällig) angezeigt wird, ähnlich wie bei dem "fade" Effekt.

Im JavaScript wissen wir, dass die Anzeigezeit "setInterval" 3000 Millisekunden/Bild beträgt, in dieser Zeit müssen wir das letzte Bild wieder auf die Position außerhalb der Box bringen, damit wir dieses wieder nach links schieben können.

Mit der Funktion "animate" können wir die Position "right: -371px" auf "right: 0px" zeitlich Steuern, bedeutet das Bild ist nicht mit einmal auf Position 0px, es wird berechnet, um wieviel px der Abstand/Millisekunde verringert werden soll. Mit mehr Zeit wird das Bild langsamer nach links verschoben.

jQuery(document).ready(function() {
	jQuery(".slider_fold").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", "right": "0px"});
		setInterval(function() {
			var letztes_i = i;
			thisSlider.find("img").eq(letztes_i).css({"z-index": "1"});
			i += 1;
			if(i == bilder_anzahl) i = 0;
			thisSlider.find("img").eq(i).css({"z-index": "2"}).animate({"right": "0px"}, 500, function() {
				thisSlider.find("img").eq(letztes_i).css({"right": "-600px"});
			});
		}, 5000);
	});
});

Das fertige Script zum testen und anpassen, könnt ihr hier jquery_slider_fold.zip downloaden.

Kommentare

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