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

klar.. ein sehr schicken sogar!

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

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

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

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

HTML-Code:

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

Danke dir tombe. werde es gleich mal ausprobieren

@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

HTML-Code:

<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

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.

Code javascript:

1 2 3 4

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

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?

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.

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

Zitat von arraybreak

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

Auch nach Javascript-Effekten?

Zitat von sheel

Auch nach Javascript-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.

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

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