✔ Javascript Bilderwechsel

M

markystgt

Grünschnabel
Hallo liebe Gemeinde,

ich habe folgendes script. Dies funktioniert auch prima, doch leider kann ich die Bilder nur in die "rechte" Richtung klicken, was muss ich einfügen, dass ich die Bilder mit "links" auch wieder zurückklicken kann?

Wahrscheinlich schlagen jetzt viele die Hände über den Kopf zusammen, aber ich steh irgendwie auf dem Schlauch.
Javascript: 
<script type="text/javascript">

 pics = new Array;
 pics[0] = "pic04.jpg";
 pics[1] = "pic05.jpg";
 pics[2] = "pic06.jpg";
 pics[3] = "pic07.jpg";


 function switchPicture(arrow) {
 var pos = document.getElementById("pos").value;
 if (arrow == "right") {
 pos++;
 if (pos >= pics.length) { pos = 0; }
 document.getElementById("bild").src = "/projekte/bib/kern/" + pics[pos];
 document.getElementById("pos").value = pos;
 }
 }

 function begin() {
 var pos = document.getElementById("pos").value;
 document.getElementById("bild").src = "/projekte/bib/kern/" + pics[pos];
 }

 </script>

 <body onload="begin()">
<img src="pic04.JPG" id="bild"><input type="hidden" value="0" id="pos">
<a onclick="switchPicture('left')" align="absmiddle"> &lt;&lt; </a><a onclick="switchPicture('right')" align="absmiddle">&gt;&gt;</a>
 
Zuletzt bearbeitet von einem Moderator:
Hi und Willkommen bei tutorials.de :)

Ersetz
Javascript: 
if (arrow == "right") {
    pos++;
    if (pos >= pics.length)
        pos = 0;
    document.getElementById("bild").src = "/projekte/bib/kern/" + pics[pos];
    document.getElementById("pos").value = pos;
}
durch
Javascript: 
if (arrow == "right") {
    pos++;
    if (pos >= pics.length)
        pos = 0;
}
if (arrow == "left") {
    pos--;
    if (pos < 0)
        pos = pics.length - 1;
}
document.getElementById("bild").src = "/projekte/bib/kern/" + pics[pos];
document.getElementById("pos").value = pos;

Und bitte in Zukunft die Codetags verwenden.Hab sie jetzt schon eingefügt.

Gruß
 
Du musst nur in "switchPicture" einen zweiten Zweig für "left" einfügen.

Javascript: 
function switchPicture(arrow) {
	var pos = document.getElementById("pos").value;
	
	if (arrow == "right") {
		pos++;
		
		if (pos >= pics.length) {
			pos = 0;
		}
	} else {
		pos--;
		
		if(pos < 0) {
			pos = pics.length - 1;
		}
	}
	
	document.getElementById("bild").src = "/projekte/bib/kern/" + pics[pos];
	document.getElementById("pos").value = pos;
}
(ungetestet)

Edit: Zu langsam :-D
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück