HTML Javascript用滑块条步骤更改图像

时间:2019-03-28 15:48:07

标签: javascript html image slider

<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之间的另一幅图像)。

非常感谢您的帮助

1 个答案:

答案 0 :(得分:1)

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

您不能使用document.getElementById("img").src = newVal+ ".jpg";,在这种情况下,您将获得100张不同的图像

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