Question

我知道如何在HTML中制作滑块，但如何使用滑块更改图像。例如，如果我的滑块的值为25，则显示名为25.png的图像，如果滑块条值为32，则显示图像32.png（假设有100个图像，滑块条具有最大值100）

＆＃13;

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

＆＃13;

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

＆＃13;

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

可能有点像这样的东西。

＆＃13;

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];
    
}

＆＃13;

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

＆＃13;

HTML Javascript使用滑块条更改图像

3 个答案: