数秒ごとに変化する画像表示の画像サイズを変更する

乾杯、私はこのコードを数秒ごとに変えますが、それぞれの画像サイズを調整する方法や方法を理解できませんそれらをすべて同じにしてください。事前に数秒ごとに変化する画像表示の画像サイズを変更する

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

ありがとう！

出典

2016-04-09 jorswag3

100％にwidthや画像のheight両方を設定し、その後divに合わせて画像をストレッチする場合は、サイズを調整しようとしたことを記述してください画像。 –

これはCSSで行うことができます。画像をdivにラップし、サイズを設定して画像を表示する方法を決めます。

あなたは

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

出典

2016-04-09 20:03:15 lukbl

数秒ごとに変化する画像表示の画像サイズを変更する

答えて

関連する問題