A ver si esto te sirve!
Código:
<html>
<head>
<style>
#marco{
border:solid 1px black;
position:absolute;
top:50px;
left:300px;
}
#boton{
border:solid 1px black;
position:absolute;
top:20px;
left:300px;
background:navy;
color:white;
}
</style>
<script language="JavaScript">
<!--
imagen=new Array;
origen=new Array;
z=0;
//............................................................
//Pon aquí la ruta de las fotos. Pon tantas como quieras
origen[0]="imagen.jpg";
origen[1]="img/foto.jpg";
origen[2]="http://www.klasic.org/img/violin.jpg";
origen[3]="http://www.webareyou.com/piramide/image1.jpg";
//............................................................
total=origen.length;
for(a=0;a<total;a++){
imagen[a]=new Image;
imagen[a].src=origen[a];
}
function cambio(){
if(z==total-1){z=-1}
z=z+1;
marco.src=imagen[z].src;
}
//-->
</script>
</head>
<body>
<script>document.write("<img id=marco src="+imagen[0].src+">");
</script>
<input id="boton" type="button" value="Siguiente" onClick="cambio()">
</body>
</html>
Un saludo!
Si tienes cualquier duda pregunta!!