✔ Galerie

so ich habe jetzt noch die backslide funktion eingefügt und den Übergang vom Galerie ende eingefügt ich hoffe ich habe jetzt auch die richtigen Variablen genommen. Ich kann es leider nicht Testen weil die beiden Funktionen immer noch nicht als Funktionen erkannt werden ich denke wir sollten uns doch lieber morgen darum kümmern hier noch der ganzen Code auf eine blick.

Javascript: 
window.onload =imagesslide;
    var imagesnumber = 6;
   
function imagesslide() {
    var currentidx;
    function displayshow(idx) {
        currentidx = idx;
        document.getElementById("display").src="images/"+idx+".jpg";
    }
    function frontslide(){
        if ( currentidx <= 101){
        currentidx += 1;
        document.getElementsByName('bild').src ="images/"+currentidx+".jpg";
        }else{
          currentidx = 1;
          document.getElementsByName('bild').src ="images/"+currentidx+".jpg";
        }
    }
    document.getElementById("frontslide").addEventListener("click", frontslide, false);
   
    function backslide(){
        if (currentidx >= 1){
        currentidx -= 1;
        document.getElementsByName('bild').src ="images/"+currentidx+".jpg";
        }else{
          currentidx = 100;
          document.getElementsByName('bild').src ="images/"+currentidx+".jpg";
        }
    }
    document.getElementById("backslide").addEventListener("click", backslide, false);
       
   
    for (var i = 1; i <= imagesnumber; i++){
        var imagesplay = "images/"+i+".jpg";
        var image = document.createElement('img');
        image.src=imagesplay;
        image.style.height="200px";
        image.style.maxWidth ="200px";
        image.setAttribute("name","bild");
        image.addEventListener("click", function(idx) {return function() {displayshow(idx)};}(i), false);
        document.getElementById('slide').appendChild(image);
       }
}
 
Zuletzt bearbeitet:
Wenn die Funktionen nicht erkannt werden, liegt es wahrscheinlich daran, dass Du noch das inline-onclick drin hast:
Code: 
<button id="backslide" onclick="backslide()">zurück</button>
<div id="slide"></div>
<button id="frontslide" onclick="frontslide()">vor</button>
Das musst Du löschen, weil ja jetzt die Listener mit addEventListener() registriert werden.

Die Verwendung des Attributs "name" ist eigentlich nur in Formularen üblich. Verwendet man getElementsByName, muss man berücksichtigen, dass diese Funktion ein Array zurück liefert. Besser geeignet für dein Zweck ist es, getElementById() zu verwenden, so wie in displayShow().

Nun noch die Erklärung von
Code: 
image.addEventListener("click", function(idx) {return function() {displayshow(idx)};}(i), false);
Naheliegend wäre es an dieser Stelle, einfach
Code: 
image.addEventListener("click", function() {displayshow(i);}, false);
zu notieren. Dann stößt man jedoch auf ein Problem: Die anonyme Funktion des Listeners wird erst aufgerufen, wenn dieses Bild geklickt wird. Dann ist aber die Schleife längst durchgelaufen und die Variabel i hat ihren Endwert, d. h. es wird immer das letzte Bild angezeigt. Probiere es aus!
Die richtige Lösung funktioniert so: Die äußere Funktion wird sofort beim Schleifendurchlauf aufgerufen, da auf die Definition ein Klammernpaar mit der Variablen i darin folgt. Der Rückgabewert ist wiederum eine Funktion, die displayShow mit dem aktuellen Wert von i aufruft. D. h. die Funktion, die letzten Endes registriert wird, sieht so aus, wenn die Variable i z. B. gerade auf 3 steht:
Code: 
image.addEventListener("click", function() {displayshow(3)}, false);
Dadurch wird die Funktion displayShow() beim Klick mit dem richtigen Index aufgerufen.

Hier noch Mal der vollständige Code, wie er bei mir funktioniert:
Code: 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<meta name="generator" content="2015.1.0.342" />
<title>Galerie</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript">
window.onload =imagesslide;
var imagesnumber = 8;

function imagesslide() {
var currentidx;
function displayshow(idx) {
currentidx = idx;
document.getElementById("display").src="bilder/"+idx+".jpg";
}
function frontslide(){
if ( currentidx < 8){
currentidx += 1;
}else{
currentidx = 1;
}
document.getElementById("display").src ="bilder/"+currentidx+".jpg";
}
document.getElementById("frontslide").addEventListener("click", frontslide, false);

function backslide(){
if (currentidx > 1){
currentidx -= 1;
}else{
currentidx = 8;
}
document.getElementById("display").src ="bilder/"+currentidx+".jpg";
}
document.getElementById("backslide").addEventListener("click", backslide, false);


for (var i = 1; i <= imagesnumber; i++){
var imagesplay = "bilder/"+i+".jpg";
var image = document.createElement('img');
image.src=imagesplay;
image.style.height="200px";
image.style.maxWidth ="200px";
image.setAttribute("name","bild");
image.addEventListener("click", function(idx) {return function() {displayshow(idx)};}(i), false);
document.getElementById('slide').appendChild(image);
}
}
</script>
</head>
<body>
<button id="backslide">zurück</button>
<img id="display">
<button id="frontslide">vor</button>
<div class="clear"></div>

<div id="slide"></div>
</body>
</html>
(Leider hat das Forum die Einrückungen verschluckt.)
Beachte, dass sich die Bilderpfade auf meine Umgebung beziehen.
 
Ok ich danke dir für deine gute tolle und schnelle Hilfe jetzt werde ich mich noch daran wagen die unten 6 Bilder weiter schalten zu können das versuche ich jetzt erstmal alleine ich habe schon wieder echt viel neues gelernt danke noch mal wenn ich es hinbekommen habe werde ich den ganzen code hier einmal aufschreiben und dann den des Thema schließen ansonsten frage ich einfach wieder.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück