HTML Javascript使用Slider條更改圖像

我知道如何在HTML中創建滑動條，但是如何使用滑塊更改圖像。例如，如果我的滑動條的值是25，那麼它顯示名爲25.png的圖像，並且如果滑動條值是32，則它顯示圖像32.png（假設有100個圖像並且滑動條具有最大值100）HTML Javascript使用Slider條更改圖像

function showValue(newValue) { 
 
    document.getElementById("range").innerHTML=newValue; 
 
}

<input type="range" min="0" max="100" value="0" step="5" onchange="showValue(this.value)" /> 
 
<span id="range">0</span>

來源

2014-09-19 ABANDOND ACOUNT

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

來源

2014-09-19 14:17:14 AvrilAlejandro

你會做這樣的事情document.getElementById("img").src = newValue + ".jpg";，其中img是要改變圖像的ID。

來源

2014-09-19 14:16:38 j08691

如果我想成爲showen在畫布上的圖像，尤斯這些方法？ – 2014-09-19 14:40:25

你的意思是把圖像放在'

是的（我通常不會問HTML問題對不起，如果有基本的問題） – 2014-09-19 14:45:15

東西有點像這樣也許。

var img = document.getElementById('img'); 
 
var img_array = ['http://www.w3schools.com/images/w3logotest2.png', 'http://www.w3schools.com/html/img_html5_html5.gif']; 
 
function setImage(obj) 
 
{ 
 
\t var value = obj.value; 
 
\t img.src = img_array[value]; 
 
    
 
}

<input onchange='setImage(this)' type="range" min="0" max="1" value="0" step="1" /> 
 

 
<img id='img' src='http://www.w3schools.com/images/w3logotest2.png' />

來源

2014-09-19 14:21:38 Mike

HTML Javascript使用Slider條更改圖像

回答

相關問題