Basic Image Viewer mit javaScript

Ich bin neu mit JavaScript und ich versuche, durch Codierung zu lernen. Ich möchte einen einfachen Bildbetrachter mit einem "nächsten" und einem "vorherigen" erstellen, die Sie anklicken können, um sich durch eine Galerie von zehn Bildern vorwärts und rückwärts zu bewegen. Also habe ich meine html, meine css und meine javaScript Dateien und 10 zufällige Bilder um es auszuprobieren. Die Dateien sind recht einfach:Basic Image Viewer mit javaScript

HTML:

<body> 
    <div id="wrap"> 
     <div class="firstColumn"> 
      <p>PHOTOGRAPHY</p> 
      <div class="firstColumnSub"> 
       <p class="photo">SOME TITLE</p> 
      </div> 
     </div> 
     <div class="back"> 
      <p><a href="index.html">BACK</a></p> 
     </div> 
     <div id="container"> 
      <div id="controllers"> 
       <div class="buttons" id="previous"> 
        <p onclick="change(-1);">PREVIOUS</p> 
       </div> 
       <div class="buttons" id="next"> 
        <p onclick="change(1);">NEXT</p> 
       </div> 
      </div> 
      <div><img height="100%" id="front" src="Image1.jpg"></div> 
      <div> 
       <p id="footer">Footer</p> 
      </div> 
     </div> 
    </div> 
</body>

Nur ein paar divs mit dem Bild in der Mitte und einer vorherigen und einem nächsten klickbare Tags. Dies ist, was es loos wie:

Die JavaScript-Datei, die eine Funktion enthält, die die verschiedenen pitures lädt und -und das ist mein Problem- zentriert sie in der Mitte der Seite durch ihre Breite Grabbing und Aktualisierung der CSS:

JavaScript:

window.onload = function setUp() { 
    var b = document.getElementById("front").width; 
    document.getElementById("container").style.width = b + "px" 
} 

var imageCount = 1; 

function change(x) { 
    imageCount = imageCount + x; 
    var image = document.getElementById('front'); 
    var str1 = "Image"; 
    var str2 = imageCount; 
    var str3 = ".jpg" 
    var sum = str1.concat(str2, str3); 
    image.src = sum; 
    var a = document.getElementById("front").width; 
    document.getElementById("container").style.width = a + "px" 
}

ich eine nicht die CSS veröffentlichen, es sei denn erforderlich, aber Sie bekommen die Idee.

Wie Sie auf "Weiter" oder "Zurück" drücken, sollte man dieses Ergebnis erhalten:

etc ... aber stattdessen bekomme ich alle Arten von zufälligen Displays :

Und hier ist die Sache, die mich verwirrt: Wenn Sie weiter "zurück" und "nächste" klicken, erscheinen die gleichen Bilder OK beim zweiten Mal, so dass es funktioniert, aber nicht sofort. Jede Hilfe wird geschätzt! Danke, P.

Quelle

2016-09-02 Paul

Was ist das genaue Problem? Bildbreite – Satpal

Ja, wenn man die ersten drei Bilder betrachtet, sind sie zentriert und die "vorherigen" und "nächsten" Tags sind mit den Ecken ausgerichtet (weil "container" das div ist, das all diese Elemente enthält), aber wenn Sie sehen sich die letzten beiden Bilder an, "next" und "previous" sind zufällig positioniert. Wie gesagt, das Problem verschwindet, wenn Sie weiter vor und zurück gehen. – Paul

So werden die Bilder gemeint unterschiedliche Breiten haben, ich möchte nur sie unabhängig von der Breite zentriert ohne – Paul

Dies ist höchstwahrscheinlich ein CSS-Positionierungsproblem. Das folgende CSS kann die Arbeit für Sie erledigen. Wenn Sie weitere Hilfe benötigen, schlage ich vor, dass Sie Ihr CSS erneut schreiben, um Hilfe zu erhalten.

#container #front 
{ 
    position: relative; 
    /* width: 0px; */ /* set via JS for each element in this use case */ 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
}

Quelle

2016-09-02 15:17:51 RandyDaddis

Basic Image Viewer mit javaScript

Antwort

Verwandte Themen