HTML Javascript 使用 Slider bar 步骤更改图像

问题描述

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

大家好，根据这段代码，我需要能够加载 0 - 35 之间的图像，35 - 65 另一个图像和 65 - 100 其他图像之间的范围.

hi people, based on this code, I need to be able to load the range between 0 - 35 an image between 35 - 65 another image and 65 - 100 other.

非常感谢您的帮助

推荐答案

我添加了 if(newVal >= 0 && newVal < 35) 两个条件来检查值是否为在一个范围内，然后设置 <img>

I added if(newVal >= 0 && newVal < 35) with 2 conditions to check if value is in a range and then set <img>

你不能使用document.getElementById("img").src = newVal+ ".jpg";，那样的话你会得到100张不同的图片

You can't use document.getElementById("img").src = newVal+ ".jpg";, in that case you will get 100 different images

<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;
          if(newVal >= 0 && newVal < 35)
            document.getElementById("img").src = "first_image.jpg";
          else if(newVal >= 35 && newVal < 65)
            document.getElementById("img").src = "second_image.png";
          else if(newVal >= 35 && newVal < 65)
            document.getElementById("img").src = "third_image.png";
        }
</script>

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