Mehrere Bilder wechseln lassen, wie realisieren?

Hi,
die Bilder sollen sich erst nach ca. 5 Sekunden anfangen zu wechseln, wechseln sollen sie sich mit ca. 1sek pro Bild, nach abspielen wieder ca. 5 Sekunden Pause.
Und so immer wieder (Schleife).

Ich möchte gern dass sich die Bilder durch "Drehen" wechseln oder wenigstens durch eine Überblendung.

Habe schon nach Java Effekten gesucht aber nichts gefunden, bitte Hilf mir :)
 
Java ist zwar auch eine Programmiersprache, aber viel Gemeinsamkeiten gibts sonst nicht.
Zumindest keine, die Java und JavaScript speziell aneinander "binden".
Die meisten Gemeinsamkeiten zwischen Java und JS
gibt es auch im Vergleich JS zu C++ etc.

Wie JavaScript zu seinem Namen gekommen ist, wird wohl nie vollständig geklärt werden :D
 
Hallo,

ich gebe dir nochmal ein bisschen was:

Javascript:
<script language="javascript" type="text/javascript">
var typ = 0;
var bild = 0;

window.setTimeout("start()", 5000);

function start() {
    change = window.setInterval("bildwechsel()", 1000);
}

function bildwechsel () {

bilder = new Array("bilder/4.jpg", "bilder/5.jpg", "bilder/6.jpg", "bilder/1.jpg", "bilder/2.jpg", "bilder/3.jpg");

if (typ == 0) {
	document.getElementById("bild" + (bild+1)).src = bilder[bild];
} else {
	document.getElementById("bild" + (bild+1)).src = bilder[(bild + 3)];
}

if (bild < 2) {
	bild++;
} else {
 	bild = 0;
 	if (typ == 0) {
		typ = 1;
 	} else if (typ == 1) {
		typ = 0;
 	}
 	window.clearInterval(change);
 	window.setTimeout("start()", 5000);
}

}
</script>
<img src="bilder/1.jpg" width="100" height="100" style="border: 0px;" id="bild1"/>
<img src="bilder/2.jpg" width="100" height="100" style="border: 0px;" id="bild2"/>
<img src="bilder/3.jpg" width="100" height="100" style="border: 0px;" id="bild3"/>

Damit ist die Pause zwischen den Bildwechseln auch erledigt. Jetzt musst du aber auch selber mal wieder was zur Lösung beitragen! Nicht das osnst noch jemand auf die Idee kommt den beitrag in die Jobbörse zu verschieben!
 
Hallo,
tolle Sache, gefällt mir!

Nur eine Sache: ich würde gerne insgesamt 58 bilder rotieren lassen.
Also am Anfang stehen 3 Bilder, dann werden die nach und nach ersetzt, bis alle 58 angezeigt wurden.
Wie ändere ich das?
Nur das array auffüllen geht nicht.
Dann läuft es immer wieder beim 4. Bild weiter.

Code:
bilder = new Array("bilder/4.jpg", "bilder/5.jpg", "bilder/6.jpg", "bilder/7.jpg", "bilder/8.jpg", "bilder/9.jpg", "bilder/10.jpg", "bilder/11.jpg", "bilder/12.jpg", "bilder/13.jpg");
 
Entscheidend ist die Bedingung der IF-Anweisung

Javascript:
if (bild < 2) {

So bald der Zähler bild größer als 2 ist, wird der ELSE-Abschnitt durchlaufen. Da ein Array mit 0 (Null) beginnt werden somit 3 Bilder angezeigt.

Wenn du 58 Bilder hast, musst du 2 durch 57 ersetzten und das Array entsprechend bestücken.

Ich würde an deiner Stelle aber bei so einer großen Anzahl kein Array nehmen sondern einfach die Bilder fortlaufen nummerieren "1.jpg, 2.jpg, 3.jpg, ..., 57.jpg, 58.jpg" und dann einfach nur mit der Zählvariablen arbeiten.
 
Günstiger wäre es hier, die Eigenschaft length des Arrays zu verwenden:
Code:
if (bild < bilder.length) {
Und kann man irgend wie noch ein Einblendeeffekt einfügen?
Wenn Du solche Übergangseffekte haben willst, ist es wahrscheinlich günstiger, wenn Du eine der zahlreichen vorgefertigten Slideshows verwendest. Diese habe ich unter meinen Lesezeichen und sie hat zahlreiche Effekte:
http://www.pixedelic.com/plugins/camera/
Ich möchte gern dass sich die Bilder durch "Drehen" wechseln
Einen solchen Effekt habe ich unter meinen Lesezeichen:
http://guilhemmarty.com/flippy/
Ist es das, was Du dir vorstellst? Diese Slider haben auch einen Dreheffekt:
http://amazingslider.com/
http://wowslider.com/js-image-slider-premium-page-demo.html
 
Zuletzt bearbeitet:
Zurück