<html>
<head>
<meta charset="utf-8">
<style>
.hidden {
display: none;
}
.img {
width: 200px;
height: 200px;
}
.img1 {background: green;}
.img2 {background: blue;}
.img3 {background: red;}
</style>
</head>
<body>
<input type="text" class="input">
<div class="img img1 hidden"></div>
<div class="img img2 hidden"></div>
<div class="img img3 hidden"></div>
<script>
var input = document.querySelector('.input');
input.oninput = function() {
var img = document.querySelectorAll('.img'), i = img.length, v = input.value-1;
while (i--) img[i].classList.add('hidden');
if (v>=0 && v <3) img[v].classList.remove('hidden');
};
</script>
</body>
</html>
так?