<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之间的另一幅图像)。
非常感谢您的帮助
答案 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>