HTML 슬라이더 막대를 사용하여 자바 스크립트 변경 이미지

Question

HTML로 슬라이더 막대를 만드는 방법을 알고 있지만 슬라이더 막대를 사용하여 이미지를 변경하려면 어떻게해야합니까? 예를 들어, 내 슬라이더 막대의 값이 25이면 25.png라는 이름의 이미지가 표시되고 슬라이더 막대 값이 32이면 이미지 32.png가 표시됩니다 (이미지가 100 개이고 슬라이더 막대에 최대 값이 있다고 가정).

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>

Answer 1

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

Answer 2

) (100)의 당신은 img 변경하려는 이미지의 ID입니다 document.getElementById("img").src = newValue + ".jpg";처럼 뭔가를 할 것입니다.

Answer 3

어쩌면 이런 작은 뭔가.

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