el origen del slider…

Independientemente del camino que tomemos para armar y dar la funcionalidad de un slider, el siguiente código dará una idea de cómo es el funcionamiento y estructura.

La idea general central es, generar un código HTML sin tanta personalización en atriburos (id, clases de CSS, names) y que por si solo sea tomado y animado para dar el efecto de estos elemtos tan utilizados actualmente en una variedad de sitios.

Se parte de la estructura HTML.

<div id=”contenedor”>
  <div id=”imagenes”>
      <div><a href=”inna1.html”><img src=”img1.jpg” alt=”” /></a></div>
      <div><a href=”inna2.html”><img src=”img2.jpg” alt=”” /></a></div>
      <div><a href=”inna3.html”><img src=”img3.jpg” alt=”” /></a></div>
      <div><a href=”inna4.html”><img src=”img4.jpg” alt=”” /></a></div>
  </div>
</div>

Nota, de acuerdo a la forma en que será propuesto el ejercicio es necesario crear un contenedor principal, en este caso llamado “contenedor” y otro que es el que se desplazará cada cierto tiempo.

Ahora es necesaria la personalización de estos DIV’s con CSS

#contenedor
{
      border:1px solid red;
      height:100px;
      width:300px;
      overflow:hidden;
}
#contenedor #imagenes
{
      position:relative;
}

una vez definida la apariencia y limitado los espacios la función que será llamada al momento del cargado de la página.

<body onload=”rotarImagen()”>

el código es:

<script type=”text/javascript” language=”javascript”>
      var nImg = 1;
      var pos=100;
      var intervalo=10;
      function rotarImagen()
      {
            if ((pos*(-1))<((document.getElementById(‘imagenes’).children.length-1)*100))
            {
                  document.getElementById(‘imagenes’).style.top = (pos-intervalo) + “px”;
                  pos = pos – intervalo;
            }
            else
            {
                  document.getElementById(‘imagenes’).style.top = “0px”;
                  pos = 0;
            }
      if ((pos%100)!=0) setTimeout(“rotarImagen()”,50);
      else setTimeout(“rotarImagen()”,2000);
     }
</script>

Como pueden ver la transición de las imágenes está en función de su tamaño y se provoca un desplazamiento secuencial del contenedor “Imagenes” que tiene una pausa menor cuando el desplazamiento ha cumplido con el tamaño de la imagen, esto da la apariencia de transición.

En caso de querer incorporar algún otro efecto de transición como difuminado de la imagen se debe modificar el alpha de la imagen (valor entre 0 y 1) y así dar otro efecto de movimiento.

A partir de este pequeño código es que podemos encontrar slides tan elaborados como nuestra imaginación (o el diseñador gráfico) lo requiera.

Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.