# Mehrere Bilder wechseln lassen, wie realisieren?



## arraybreak (16. Januar 2012)

Abend All,

bin gerade auf der Suche nach einer Lösung für mein Problem, 
ich möchte auf der Startseite 6 Bilder in einer reihe anbringen die sich automatisch mit Verzögerung  "eins nach dem anderem" durch ein anderes gewechselt werden soll.

Eine Möglichkeit (die einfachste) wäre die Bilder als GIFS zu erstellen, Nachteil dabei ist, dass man beim Austausch von Bild/er die ganze GIF nochmal bearbeiten muss.

Existiert eine Möglichkeit es irgend wie mit PHP oder jQuery zu realisieren?

Gruß Alex


----------



## Fruitgum (16. Januar 2012)

klar.. ein sehr schicken sogar!

http://css-tricks.com/anythingslider-jquery-plugin/


----------



## arraybreak (16. Januar 2012)

Nein ich glaube du hast mich falsch verstanden, hier nochmal, ein Beispiel mit Bild

6 kleine Bilder in einer reihe (sie müssen alle sichtbar sein) und dann sollen sich die 6 Bilder eins nach dem anderen auf ein anderes Bild wechseln




Hoffe die mühe für das Bild lohnt sich


----------



## Fruitgum (16. Januar 2012)

naja...

der slider ist ja anpassbar. er hatt ja alle bilder geladen und zeigt sie an. du kannst nun zb. alle anzeigen und dann wechseln die durch, ja und wenn sie nicht genau nach einander sich verschieben sollen, dann "mischt" du die bilder vor jeden wechseln wie in karten spiel.

eigentlich sollst du dir das ja nur anschauen wie er die reinläd und verwendet. vielleicht fällt dir ja dann eine lösung ein, wie du das für dich verwenden könntest. mit css stehen dir dort noch sehr viele möglichkeiten zur verfügung...

natürlich kannst du dir auch eine funktion bauen die jeden div mehre bilder zuordnet und mit einer timerfunction die dann auch zeitgleich oder durch versetzte zeit angaben wie eine laolawelle von rechts nach links, von der mitte nach außen usw. dir deine bilder wechselt...


----------



## tombe (17. Januar 2012)

Das hier sind zwar nur 3 Bilder aber es sollte sein was du suchst:



```
<script language="javascript" type="text/javascript">
var typ = 0;
var bild = 0;
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;
 	}
}

}
</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"/>
```

Einfach im Array die Bildnamen entsprechend ändern bzw. erweitern und es sollte klappen.


----------



## arraybreak (18. Januar 2012)

Danke dir tombe. werde es gleich mal ausprobieren


----------



## arraybreak (18. Januar 2012)

@tombe: es funktioniert super, genau was ich brauche, danke dir vielmals  , kannst du kurz den quellcode angucken, hab es angepasst, hoffe richtig.

Wäre es den möglich die Startphase wenig später zu starten und eine wechsel-animation zuzufügen? Wenn ich den "window.setInterval" ändere, dann startet er zwar später aber die ganzen Bilder werden auch später weiter gespielt 


```
<script language="javascript" type="text/javascript">
var typ = 0;
var bild = 0;
window.setInterval("bildwechsel()", 1000);

function bildwechsel () {

bilder = new Array("images/7.jpg", "images/8.jpg", "images/9.jpg", "images/10.jpg", "images/11.jpg", "images/12.jpg", "images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg", "images/6.jpg");

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

if (bild < 5) {
	bild++;
} else {
 	bild = 0;
 	if (typ == 0) {
		typ = 1;
 	} else if (typ == 1) {
		typ = 0;
 	}
}

}
</script>
<img src="images/1.jpg" width="120px" height="120px" style="border: 0px;" id="bild1"/>
<img src="images/2.jpg" width="120px" height="120px" style="border: 0px;" id="bild2"/>
<img src="images/3.jpg" width="120px" height="120px" style="border: 0px;" id="bild3"/>
<img src="images/4.jpg" width="120px" height="120px" style="border: 0px;" id="bild4"/>
<img src="images/5.jpg" width="120px" height="120px" style="border: 0px;" id="bild5"/>
<img src="images/6.jpg" width="120px" height="120px" style="border: 0px;" id="bild6"/>
```

Und nochmal vielen Dank


----------



## tombe (19. Januar 2012)

Sorry war erst jetzt hier wieder Online.

Du könntest den setIntervall in eine Funktion setzen und diese Funktion mit SetTimeout nach der gewünschten Zeitspanne aufrufen und starten.


```
function start() {
    window.setInterval("bildwechsel()", 1000);
}
window.setTimeout("start()", 5000);
```


----------



## arraybreak (19. Januar 2012)

Hi, danke dir. Allerdings wenn er die Bilder abgespielt hat läuft er ohne pause einfach weiter, kann man auch ein pause dazwischen schieben? Und kann man irgend wie noch ein Einblendeeffekt einfügen?


----------



## tombe (20. Januar 2012)

Es müsste vielleicht erst nochmal geklärt werden welche Anforderungen du genau an den Bildwechsel stellst, dann kann an der Lösung gearbeitet werden.

Also schreib bitte nochmal was genau passieren soll.


----------



## arraybreak (20. Januar 2012)

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


----------



## sheel (20. Januar 2012)

arraybreak hat gesagt.:


> Habe schon nach Java Effekten gesucht aber nichts gefunden, bitte Hilf mir


Auch nach Java_script_-Effekten?


----------



## arraybreak (20. Januar 2012)

sheel hat gesagt.:


> Auch nach Java_script_-Effekten?



habe ich was falsches gesagt?  ich dachte der Script ist ein Javascript und hiermit auch sagte ich Java-Effekte, wenn es falsch ist tut mir Leid, kenne mich hier nicht gut aus.


----------



## sheel (20. Januar 2012)

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


----------



## arraybreak (20. Januar 2012)

hehe ok 
wenn du schon hier bist, kennst du dich damit aus, vielleicht könntest du mir bei meinen problemen helfen


----------



## tombe (20. Januar 2012)

Hallo,

ich gebe dir nochmal ein bisschen was:


```
<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!


----------



## werny (26. Februar 2014)

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.


```
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");
```


----------



## tombe (26. Februar 2014)

Entscheidend ist die Bedingung der IF-Anweisung


```
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.


----------



## Sempervivum (27. Februar 2014)

> if (bild < 2) {


Günstiger wäre es hier, die Eigenschaft length des Arrays zu verwenden:
	
	
	



```
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


----------

