Ändern der Bildgröße auf der Bildanzeige, die alle paar Sekunden ändert

Prost, ich habe diesen Code für eine Bildanzeige, die alle paar Sekunden ändert, aber ich kann nicht herausfinden, wie die Bildgröße von jedem oder wie zu justieren mach sie alle gleich.Ändern der Bildgröße auf der Bildanzeige, die alle paar Sekunden ändert

<!DOCTYPE html> 
 

 
<html> 
 
    <head> 
 
     <title>change picture</title> 
 
     <script type = "text/javascript"> 
 
      function displayNextImage() { 
 
       x = (x === images.length - 1) ? 0 : x + 1; 
 
       document.getElementById("img").src = images[x]; 
 
      } 
 

 
      function displayPreviousImage() { 
 
       x = (x <= 0) ? images.length - 1 : x - 1; 
 
       document.getElementById("img").src = images[x]; 
 
      } 
 

 
      function startTimer() { 
 
       setInterval(displayNextImage, 3000); 
 
      } 
 

 
      var images = [], x = -1; 
 
      images[0] = "image1.jpg"; 
 
      images[1] = "image2.jpg"; 
 
      images[2] = "image3.jpg"; 
 
     </script> 
 
    </head> 
 

 
    <body onload = "startTimer()"> 
 
     <img id="img" src="startpicture.jpg"/> 
 
     <button type="button" onclick="displayPreviousImage()">Previous</button> 
 
     <button type="button" onclick="displayNextImage()">Next</button> 
 
    </body> 
 
</html>

Vielen Dank im Voraus!

Quelle

2016-04-09 jorswag3

Bitte beschreiben Sie, was Sie haben versucht, die Größen der einzustellen Bilder. –

Es kann mit CSS getan werden. Wickeln Sie das Bild in div, legen Sie die Abmessungen fest und entscheiden Sie, wie das Bild angezeigt werden soll.

Wenn Sie Bild strecken die div dann passen sowohl width gesetzt und height von Bild zu 100%

#img-box { 
 
    width: 400px; 
 
    height: 400px; 
 
    border: 1px solid black; 
 
    
 
} 
 
#img-box img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    
 
}

<!DOCTYPE html> 
 

 
<html> 
 

 
<head> 
 
    <title>change picture</title> 
 
    <script type="text/javascript"> 
 
    function displayNextImage() { 
 
     x = (x === images.length - 1) ? 0 : x + 1; 
 
     document.getElementById("img").src = images[x]; 
 
    } 
 

 
    function displayPreviousImage() { 
 
     x = (x <= 0) ? images.length - 1 : x - 1; 
 
     document.getElementById("img").src = images[x]; 
 
    } 
 

 
    function startTimer() { 
 
     setInterval(displayNextImage, 3000); 
 
    } 
 

 
    var images = [], 
 
     x = -1; 
 
    images[0] = "https://upload.wikimedia.org/wikipedia/commons/a/a9/Bristol_MMB_%C2%AB42_River_Avon.jpg"; 
 
    images[1] = "https://upload.wikimedia.org/wikipedia/commons/1/19/Finsternis_Natur.jpg"; 
 
    images[2] = "https://upload.wikimedia.org/wikipedia/commons/8/8c/Black_CL.png"; 
 
    </script> 
 
</head> 
 

 
<body onload="startTimer()"> 
 
    <div id="img-box"> 
 
    <img id="img" src="https://upload.wikimedia.org/wikipedia/commons/0/03/Electricsheep-29142.jpg" /> 
 
    </div> 
 
    <button type="button" onclick="displayPreviousImage()">Previous</button> 
 
    <button type="button" onclick="displayNextImage()">Next</button> 
 
</body> 
 

 
</html>

Quelle

2016-04-09 20:03:15 lukbl

Ändern der Bildgröße auf der Bildanzeige, die alle paar Sekunden ändert

Antwort

Verwandte Themen