Her birkaç saniyede bir görüntü değişiminde görüntü boyutunun değiştirilmesi

Şerefe, her birkaç saniyede bir görüntü görüntüsü için bu kodu kullanıyorum ancak her birinin görüntü boyutunu nasıl ayarlayacağımı veya nasıl ayarlanacağını bilemiyorum. hepsini aynı yapın. peşinHer birkaç saniyede bir görüntü değişiminde görüntü boyutunun değiştirilmesi

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

teşekkürler!

kaynak

2016-04-09 jorswag3

sen boyutlarını ayarlamak için denedim ifade ediniz% 100'e görüntünün hem width ve height set sığacak şekilde uzatılır istiyorsanız Görüntüler. –

Css ile yapılabilir. Resmi div ile sarın, boyutlarını ayarlayın ve görüntünün nasıl görüntüleneceğine karar verin.

Eğer div sonra

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

kaynak

2016-04-09 20:03:15 lukbl

Her birkaç saniyede bir görüntü değişiminde görüntü boyutunun değiştirilmesi

cevap

İlgili konular