HTML Javascript使用滑动条更改图像 [英] HTML Javascript change image with Slider bar

问题描述

我知道如何在HTML中制作滑动条，但我怎样才能通过滑动条来更改图片。例如，如果我的滑动条的值是25，那么它显示名为25.png的图像，并且如果滑动条值是32，则它显示图像32.png（假设有100个图像并且滑动条具有最大值）

  function showValue（newValue）{document.getElementById（range）。innerHTML = newValue;}  

 < input type =rangemin =0max =100value =0step =5onchange =showValue / span> 
 
 b $ b 
解决方案
 
 
 
 < input id =valRtype =rangemin =0max =100value =0step =5oninput =showVal（this.v alue）onchange =showVal（this.value）/> < span id =range> 0< / span> < img id =img>< script> var val = document.getElementById（valR）.value;的document.getElementById（ 范围）的innerHTML = VAL。 document.getElementById（img）。src = val +.jpg;函数showVal（newVal）{document.getElementById（range）。innerHTML = newVal; document.getElementById（img）。src = newVal +.jpg; }< / script>  

I know how to make a slider bar in HTML, but how can I do change an image with a slider bar. For instance, if the value of my slider bar is 25 then it shows image that named 25.png and if slider bar value is 32 then it shows image 32.png (assuming that there are 100 images and the slider bar has a maximum value of 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>

解决方案

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

这篇关于HTML Javascript使用滑动条更改图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！