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' />