Cómo crear una galería de imágenes sencilla

Las galerías de imágenes comúnmente son construidas con un arreglo que contiene las imágenes y descripciones pertenecientes, así para poder mostrarlas sólo se desplaza por dicho arreglo para poder ir mostrando cada elemento, claro, con un poco de librerías y frameworks los efectos pueden ser tan complejos como queramos, pero en este tutorial les voy a enseñar el núcleo de cómo crear una galería de imágenes sencilla usando javascript, usando un método sino fácil, sencillísimo en donde aprenderemos a crear un script tan sencillo que luego podrán mejorarlo y agregarle efectos.

ver el tutorial completo

Así que, para este ejemplo, se van a usar dos arrays; la primera contendrá la dirección URL de una serie de imágenes y la segunda, los textos asociados a cada una de esas imágenes:

var foto = new Array();
foto[0] = "URL_imagen_1.png";
foto[1] = "URL_imagen_2.png";
foto[2] = "URL_imagen_3.png";
foto[3] = "URL_imagen_4.png";
foto[4] = "URL_imagen_5.png";

var texto = new Array();
texto[0] = "la primera de las imagenes";
texto[1] = "esta es la segunda";
texto[2] = "esta es al tercera";
texto[3] = "y casi vamos a terminar";
texto[4] = "la ultima de las imagenes";

Los arrays tienen muchas funciones y propiedades internas que podemos utilizar, ahora, nos limitaremos a una de ellas que es la que nos dice cuántos elementos tiene:

var cantidad = foto.length;

Pero necesitamos un dato más, debemos llevar la cuenta, saber cuál es la imagen que estamos viendo para poder saber cuál es la siguiente y cuál es la anterior así que la guardaremos en alguna parte y al inicio, su valor será cero ya que la imagen visible es la primera:

var cualvemos = 0;

function mover(direccion) {

  // accedemos al objeto que contiene la imagen
  var laimagen = document.getElementById("misfotos");

  // accedemos al objeto que contiene el texto
  var eltexto = document.getElementById("mistextos");

  // ¿cuál es el indice de la última imágenes en nuestra array?
  var ultima = foto.length - 1; // en el ejemplo, será el 4
  
  // antes de cambiar los datos, en un auxilar, verificamos cuál sería la imagen a mostrar
  var auxiliar = cualvemos + direccion; // se sumará 1 o se restará 1 al índice
  // si el resultado es menor que cero, le decimos que vaya al otro extremo y muestre la ultima
  if(auxiliar < 0) { auxiliar = ultima; }
  // si el resultado es mayor que la última, le decimos que vaya al otro extremo y muestre la primera
  if(auxiliar > ultima) { auxiliar = 0; }
  
  // listo, ahora ya podemos cambair el dato sin problemas
  cualvemos = auxiliar;
  
  // ponemos la dirección URL de la imagen en la etiqueta IMG
  laimagen.src = foto[cualvemos];

  // ponemos el texto en la etiqueta SPAN
  eltexto.innerHTML = texto[cualvemos];

}

Así que, para que el ejemplo funcione, bastará entonces cambiar los enlaces y llamar a la función que acabamos de crear:

<a href="javascript:mover(-1);"> anterior </a> | <a href="javascript:mover(1);"> siguiente </a>

Ver el ejemplo online (se encuentra en la parte inferior)