//retardo entre imagenes en la reproduccion automatica (milisegundos)
var retardo_rotacion = 2000
//indice imagen inicial
actual = 0

//ir a la siguiente imagen
function siguiente() {
	if (document.formulario.imagen[actual+1]) {
		document.images.visor.src = document.formulario.imagen[actual+1].value
		document.formulario.imagen.selectedIndex = ++actual
	}
	else inicio()
}

//ir a la imagen anterior
function anterior() {
	if (actual-1 >= 0) {
		document.images.visor.src = document.formulario.imagen[actual-1].value
		document.formulario.imagen.selectedIndex = --actual
   	}
	else ultimo()
}

//ir a la primera imagen
function inicio() {
	actual = 0
	document.images.visor.src = document.formulario.imagen[0].value
	document.formulario.imagen.selectedIndex = 0
}

//ir a la ultima imagen
function ultimo() {
	actual = document.formulario.imagen.length-1
	document.images.visor.src = document.formulario.imagen[actual].value
	document.formulario.imagen.selectedIndex = actual
}

//cambia a modo reproduccion automatica
function repAuto(text) {
	document.formulario.automatico.value = (text == "Detener") ? "Reproducir" : "Detener"
	reproducir()
}


function cambiaLista() {
	actual = document.formulario.imagen.selectedIndex
	document.images.visor.src = document.formulario.imagen[actual].value
}

//realiza reproduccion atuomatica
function reproducir() {
	if (document.formulario.automatico.value == "Detener") {
		actual = (actual == document.formulario.imagen.length-1) ? 0 : actual+1
		document.images.visor.src = document.formulario.imagen[actual].value
		document.formulario.imagen.selectedIndex = actual
		window.setTimeout("reproducir()", retardo_rotacion)
	}
}


//UTILIZACION
<!-- Este formulario muestra el visor y los controles -->
//<form name=formulario>
//<table cellspacing=1 cellpadding=4 bgcolor="#000000">
//<tr>
//<td align=center bgcolor="white">
//<b>Visor de imágenes</b>
//</td>
//</tr>
//<tr>
//<td align=center bgcolor="white" width=200 height=150>
//<img src="../guggen/foto_1.jpg" name="visor">
//</td>
//</tr>
//<tr>
//<td align=center bgcolor="#C0C0C0">
//<select name="imagen" onChange="cambiaLista();">
//<option value="../guggen/foto_1.jpg" selected>Primera imagen
//<option value="../guggen/foto_2.jpg">Segunda imagen
//<option value="../guggen/foto_3.jpg">Tercera imagen
//<option value="../guggen/foto_4.jpg">Cuarta imagen
//</select>
//</td>
//</tr>
//<tr>
//<td align=center bgcolor="#C0C0C0">
//<input type=button onClick="inicio();" value="|<<" title="Inicio">
//<input type=button onClick="anterior();" value="<<" title="Anterior">
//<input type=button name="automatico" onClick="repAuto(this.value);" value="Reproducir" title="Reproducción automática">
//<input type=button onClick="siguiente();" value=">>" title="Siguiente">
//<input type=button onClick="ultimo();" value=">>|" title="Ultimo">
//</td>
//</tr>
//</table>
//</form>