Busco código en javascript para implementar una galería de fotos en una web
Desde madrid
Estoy intentando desarrollar una página, pero hay un sección de fotos con la cual me atasqué, intento poner la orden de " siguiente" y " anterior" para que vayan cargando las imágenes en el mismo sitio sin cargar una página nueva, pero por más que lo intento algo debo de estar poniendo mal.. ¿me podrías decir el código o echarme una mano?
Estoy intentando desarrollar una página, pero hay un sección de fotos con la cual me atasqué, intento poner la orden de " siguiente" y " anterior" para que vayan cargando las imágenes en el mismo sitio sin cargar una página nueva, pero por más que lo intento algo debo de estar poniendo mal.. ¿me podrías decir el código o echarme una mano?
1 respuesta
Respuesta de cvblagil
1
Espero que esto te sirva. Consiste en generar un Array con las imágenes e ir moviéndote por el indice del array.
<HEAD>
<TITLE>FORMULARIO</TITLE>
<script>
var Imagenes= new Array()
Imagenes[0]="imagen1.jpg"
Imagenes[1]="imagen2.jpg"
Imagenes[2]="imagen3.jpg"
Imagenes[3]="imagen4.jpg"
Imagenes[4]="imagen5.jpg"
Imagenes[5]="imagen6.jpg"
Imagenes[6]="imagen7.jpg"
Imagenes[7]="imagen8.jpg"
indice=0
function fSiguiente(){
if (indice<Imagenes.length-1){
indice=indice+1;
imagen.src=Imagenes[indice];
}
}
function fAnterior(){
if (indice>0){
indice=indice-1;
imagen.src=Imagenes[indice];
}
}
</script>
<BODY>
<INPUT type="button" value="Anterior" onclick="fAnterior()">
<INPUT type="button" value="Siguiente" onclick="fSiguiente()"><br>
<IMG id="imagen" src="abrazo.jpg">
</BODY>
</HTML>
<HEAD>
<TITLE>FORMULARIO</TITLE>
<script>
var Imagenes= new Array()
Imagenes[0]="imagen1.jpg"
Imagenes[1]="imagen2.jpg"
Imagenes[2]="imagen3.jpg"
Imagenes[3]="imagen4.jpg"
Imagenes[4]="imagen5.jpg"
Imagenes[5]="imagen6.jpg"
Imagenes[6]="imagen7.jpg"
Imagenes[7]="imagen8.jpg"
indice=0
function fSiguiente(){
if (indice<Imagenes.length-1){
indice=indice+1;
imagen.src=Imagenes[indice];
}
}
function fAnterior(){
if (indice>0){
indice=indice-1;
imagen.src=Imagenes[indice];
}
}
</script>
<BODY>
<INPUT type="button" value="Anterior" onclick="fAnterior()">
<INPUT type="button" value="Siguiente" onclick="fSiguiente()"><br>
<IMG id="imagen" src="abrazo.jpg">
</BODY>
</HTML>
