Mehrere Bilder wechseln lassen, wie realisieren?

[arraybreak]

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]

klar.. ein sehr schicken sogar!

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

 

[arraybreak]

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]

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]

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]

Danke dir tombe. werde es gleich mal ausprobieren

 

[arraybreak]

@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]

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]

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]

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.