HTML Javascript 使用滑塊條步驟更改圖像

Question

<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 之間的其他圖像。

非常感謝您的幫助

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