HTML Javascript使用滑塊欄更改圖像

Question

我知道如何在HTML中制作滑動條，但是如何使用滑動條更改圖像。 例如，如果我的滑塊的值為25，則顯示名為25.png的圖像，如果滑塊值為32，則顯示圖像為32.png（假定有100張圖像，並且滑塊具有最大值之100）

 function showValue(newValue) { document.getElementById("range").innerHTML=newValue; } 

 <input type="range" min="0" max="100" value="0" step="5" onchange="showValue(this.value)" /> <span id="range">0</span> 

Answer 1

您將執行類似document.getElementById("img").src = newValue + ".jpg"; ，其中img是您要更改的圖像的ID。

Answer 2

  <input id="valR" type="range" min="0" max="100" value="0" step="5" oninput="showVal(this.value)" onchange="showVal(this.value)" /> <span id="range">0</span> <img id="img"> <script> var val = document.getElementById("valR").value; document.getElementById("range").innerHTML=val; document.getElementById("img").src = val + ".jpg"; function showVal(newVal){ document.getElementById("range").innerHTML=newVal; document.getElementById("img").src = newVal+ ".jpg"; } </script> 

Answer 3

可能有點像這樣。

 var img = document.getElementById('img'); var img_array = ['http://www.w3schools.com/images/w3logotest2.png', 'http://www.w3schools.com/html/img_html5_html5.gif']; function setImage(obj) { var value = obj.value; img.src = img_array[value]; } 

 <input onchange='setImage(this)' type="range" min="0" max="1" value="0" step="1" /> <img id='img' src='http://www.w3schools.com/images/w3logotest2.png' />