HTML Javascript用滑块条步骤更改图像 [英] HTML Javascript change image with Slider bar step
本文介绍了HTML Javascript用滑块条步骤更改图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
<输入id ="valR"类型="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";函数showVal(newVal){document.getElementById("range").innerHTML = newVal;document.getElementById("img").src = newVal +".jpg";}</script>
基于此代码,我需要能够加载介于0-35之间的范围(介于35-65之间的另一个图像和65-100之间的另一个图像).
非常感谢您的帮助
解决方案
我添加了带有两个条件的 if(newVal> = 0&& newVal< 35)
,以检查值是否为范围内,然后设置< img>
您不能使用 document.getElementById("img").src = newVal +".jpg";
,在这种情况下,您将获得100张不同的图像
<输入id ="valR" type ="range" min ="0" max ="100" value ="0"步骤="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";函数showVal(newVal){document.getElementById("range").innerHTML = newVal;if(newVal> = 0&& newVal< 35)document.getElementById("img").src ="first_image.jpg";否则if(newVal> = 35& newVal< 65)document.getElementById("img").src ="second_image.png";否则if(newVal> = 35& newVal< 65)document.getElementById("img").src ="third_image.png";}</script>
<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>
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.
thank you very much for your help
解决方案
I added if(newVal >= 0 && newVal < 35)
with 2 conditions to check if value is in a range and then set <img>
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用滑块条步骤更改图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文