Creando un slider con JavaScript (Parte 1)

Ya que pudimos crear una galería de imágenes o por lo menos tratar de entender cómo funcionan; ahora me preguntan por los sliders y es que, al parecer, la nueva moda no nos permite conformamos con cambiar las imagenes con un click sino que también queremos que se "deslicen".

Obviamente, hacer algo así y que funcione perfectamente excede las posibilidades de todos nosotros pero, podemos intentarlo aunque sea de manera muy elemental.

Lo primero que debiéramos saber es que acá no hay magia; no hay instrucciones ni códigos que generen esos efectos sino que están creados de manera manual. No es cosa de escribir algo como mover de acá para allá; cada uno de esos movimientos es una intrucción precisa y es la velocidad con que se ejecuta cientos de veces lo que produce el efecto. Cuando usamos una librería de algún tipo, es esa librería la que nos facilita estas tareas pero siempre, en alguna parte, alguien tuvo que escribirlo.

Para hacer algo así necesitamos conocer unas funciones nuevas, aquellas que ejecutan "cosas" cada cierto tiempo. La más elemental se llama setTimeout() y lo que hace es ejecutar algo pasado un cierto tiempo. Es fácil de usar; por ejemplo:

<script type="text/javascript">
  function verventana() {
    alert("Pasaron cinco segundos y ahora debe cerrar la ventana manualmente");
  }
</script>

<a href="#" onclick="setTimeout(verventana, 5000);">click y esperar</a>

Al hacer click se ejecuta setTimeout() con dos parámetros, el primero indica el nombre de una función (la nuestra, la que queremos usar) y el segundo indica el tiempo que deberá pasar entre que hicimos click y el momento en que se ejecute esa función; en este caso, dice 5000 que es un valor expresado en milisegundos (1 segundo = 1000 milisegundos). Pasados cinco segundos se ejecutará verventana() que simplemente, mostrará una ventanita de alerta.

click y esperar

Esto ocurrirá cada vez que se haga click en ese enlace; en resumen, en lugar de ocurrir algo inmediatamente, habrá una demora.

No es algo que nos ayude en nada para lo que queremos hacer pero, hay otra función que es muy similar que se llama setInterval() y tiene la misma sintaxis pero una diferencia fundamental, en lugar de ejecutarse una sola vez, se ejecuta cada cierto tiempo de manera contínua; si se nos ocurriera poner lo mismo que antes pero usando esta función en lugar de la otra, lo que ocurrriría es que la ventana aparecería cada cinco segundos; algo que podría ser muy exótico pero bastante molesto.

A esta función se le suma otra que es la que nos permitiría detenerla y se llama clearTimeout(). Son estas dos funciones las que utilizaremos para animar un poco las cosas.

Vamos a un ejemplo para entender la idea. Pondremos una imagen y con un enlace, haremos que aparezca y desaparezca, modificando su tamaño. Tendré este HTML:

<img id="demoA1" src="URL_imagen" width="128" />

<a href="javascript:ejemploancho('demoA1');">click</a>

Y ahora, el código JavaScript que en realidad, puede ser hecho de mil maneras distintas y con distintos criterios:

<script type="text/javascript">
//<![CDATA[
  // voy a inicializar algunas variables
  var timerancho; // el nombre que le daré al timer
  var flagancho = 0; // un valor que me indicará si estoy aumentando (1)  o disminuyendo (-1) el tamaño
  var demoimagenancho; // el objeto imagen que voy a animar
  var contadorancho = 0; // es lo que usaré para saber cuando detenerme

  // esta función es la que se ejecuta al hacer click y se llega con el ID de la etiqueta IMG
  function ejemploancho(cual) {
    // si el flag no es cero quiere decir que se está animando así que salimos de la función para no ejecutarla varias veces
    if(flagancho!=0) {
      return;
    }
    // guardo la imagen
    demoimagenancho = document.getElementById(cual);
    contadorancho = 0; // pongo el contador a cero
    // si la imagen mide 128 pixeles al hacer click haré que se achique hasta desaparecer
    if(demoimagenancho.width==128) {
      flagancho = -1; // achicar la imagen dismimuyendo su ancho
    } else {
      // caso contrario, al hacer click haré que se agrande hasta su tamaño original
      flagancho= 1; // agrandar la imagen aumentando su ancho
    }
    // listo, ahora indico que la función cambiarancho() se ejecute cada milisegundo
    timerancho = setInterval(cambiarancho,1);
  }

  // y esta es la función que se ejecutará una vez cada milisegundo
  function cambiarancho() {
    contadorancho++; // incrementamos el contador
    // si el contador llegó hasta 128 (que es el ancho de la imagen) detenemos todo
    if(contadorancho>128) {
      // cancelamos la función y ya no se seguirá ejecutando
      clearTimeout(timerancho);
      // terminamos la animación
      flagancho = 0;
    }
    // incrementamos o decrementamos el ancho de la imagen
    demoimagenancho.width = demoimagenancho.width + flagancho;
  }
//]]>
</script>

¿Engorroso?

Lo mismo puede hacerse con cualquier otra propiedad o combinar varias al mismo tiempo.

Así que la base para hacer un slider sería cambiar la posición de las imágenes y para eso, podemos usar las propiedades left, top, right o bottom pero, habrá que pensar la forma de manejarlas.