HTML Javascript使用Slider条更改图像

  • Z时代
  • 2024-01-10
  • 分类：问答

我知道如何在HTML中创建滑动条，但是如何使用滑块更改图像。例如，如果我的滑动条的值是25，那么它显示名为25.png的图像，并且如果滑动条值是32，则它显示图像32.png（假设有100个图像并且滑动条具有最大值100）HTML Javascript使用Slider条更改图像

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>

回答：

你会做这样的事情document.getElementById("img").src = newValue + ".jpg";，其中img是要改变图像的ID。

回答：

东西有点像这样也许。 

var img = document.getElementById('img');  
var img_array = ['/wp-content/uploads/new2022/20220327voicc/188154052.png', '/wp-content/uploads/new2022/20220327voicc/189154052.gif'];  
function setImage(obj)  
{  
\t var value = obj.value;  
\t img.src = img_array[value];  
}

<input onchange='setImage(this)' type="range" min="0" max="1" value="0" step="1" />  
<img id='img' src='/wp-content/uploads/new2022/20220327voicc/188154052.png' />

以上是 HTML Javascript使用Slider条更改图像 的全部内容， 来源链接： utcz.com/qa/257923.html

回到顶部