Вот изваял... На самом деле я тоже совсем недавно начал изучать JS и единственное на что меня хватило так это на:
<html>
<head>
<style>
#Picture {
background-image:url(../img/1.jpg);
background-color: black;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<select id="select1">
<option value="1">First Picture</option>
<option value="2">Second Picture</option>
<option value="3">Third Picture</option>
<option value="4">Fourth Picture</option>
</select>
<input id="button1" type="button" value="Next"/>
<input id="button2" type="button" value="Previous"/>
<div id="Picture"></div>
<script type="text/javascript">
document.getElementById('button1').onclick = function(){
var k = document.getElementById('select1').value;
if (document.getElementById('select1').value < 4) {
k++;
document.getElementById('Picture').style.backgroundImage = "url(../img/" +k+".jpg)";
document.getElementById('select1').value++;
};
};
document.getElementById('button2').onclick = function(){
var k = document.getElementById('select1').value;
if (document.getElementById('select1').value > 1) {
k--;
document.getElementById('Picture').style.backgroundImage = "url(../img/" +k+".jpg)";
document.getElementById('select1').value--;
};
};
document.getElementById('select1').onchange = function(){
var k = document.getElementById('select1').value;
document.getElementById('Picture').style.backgroundImage = "url(../img/" +k+".jpg)";
}
</script>
</body>
</html>
Собственно, функции вроде как понятно что делают...