Ir directamente al contenido de esta página

El carrusel de imágenes, retocado

El pasado 13 de mayo publicamos el script de un carrusel de imágenes que pesaba menos de 2Kb. Hoy publicamos una nueva versión, que incluye una mejora importante.

El problema

En la versión anterior, el script apila los elementos de la lista de las diapositivas y va variando la opacidad de los mismos. No obstante, la posición en la que se han apilado es fija. ¿Qué significa esto? Pues que si en los li se han incluido vínculos, sólo funcionará el del último elemento de la lista, que es el que se ha situado por encima de todos los demás.

Se ve más claro con un ejemplo. Esta página presenta unos vínculos sobre las imágenes, pero el que recibe el clic es siempre el tercero.

Bien, pues lo hemos corregido.

El nuevo script

Con la nueva versión del script, los vínculos activos son los de la diapositiva actual.

Éste es el nuevo código:


var DP = {
  ds: '',
  dA: 0,
  sD: 0,
  tD: 0,
  t: 3000,
  idD: 'diapos',
  nID: 'diapos-on',
  idC: 'contador',
  clC: 'actual',
  IE: false,
  anim: true,
  intv: '',
  lnz: '',
  $: function(el){
    var e = document.getElementById(el); return e;
  },
  op: function(el,v){
    if((v==0)||(v==100)){
      if(DP.IE){
        el.style.filter='alpha(opacity='+v+')';
        el.style.zIndex=v;
      } else {
        el.setAttribute('style','opacity:'+v/100+';z-index:'+v);
      }
    } else {
      (DP.IE) ? el.style.filter='alpha(opacity='+v+')' : el.setAttribute('style','opacity:'+v/100);
    }
  },
  ac: function(c){
    DP.$(DP.idC).getElementsByTagName('li')[DP.dA].className=c;
  },
  fun: function(){
    var i = 100;
    (DP.dA==DP.tD) ? DP.sD = 0 : DP.sD = DP.dA+1;
    DP.intv = setInterval(function(){
      i = i-5;
      if(i>=0){
        DP.op(DP.ds[DP.dA],i);
        DP.op(DP.ds[DP.sD],(100-i));
      } else {
        DP.ac('');
        (DP.dA==DP.tD) ? DP.dA = 0 : DP.dA++;
        DP.ac(DP.clC);
        clearInterval(DP.intv);
        if(DP.anim){DP.lnz = setTimeout(DP.fun,DP.t);}
      }
    },50);
  },
  manual: function(d){
    clearInterval(DP.intv);clearTimeout(DP.lnz);DP.anim=false;
    DP.op(DP.ds[DP.dA],0);
    DP.op(DP.ds[d],100);
    DP.ac('');
    DP.dA=d;
    DP.ac(DP.clC);
  },
  inicio: function(){
    (navigator.userAgent.match('MSIE')) ? DP.IE = true : DP.IE = false;
    DP.$(DP.idD).id=DP.nID;
    DP.ds = DP.$(DP.nID).getElementsByTagName('li');
    DP.tD = DP.ds.length-1;
    var ct = document.createElement('ul');
    ct.id = DP.idC;
    (DP.$(DP.nID).nextSibling) ? (DP.$(DP.nID).parentNode).insertBefore(ct,DP.$(DP.nID).nextSibling) : (DP.$(DP.nID).parentNode).appendChild(ct); 
    for(var i=0;i<=DP.tD;i++){
      DP.op(DP.ds[i],0);
      DP.$(DP.idC).innerHTML += '<li><a href="#" onclick="DP.manual('+i+')">'+(i+1)+'</a></li>';
    }
    DP.op(DP.ds[0],100);
    DP.ac(DP.clC);
    DP.lnz = setTimeout(DP.fun,DP.t);
  }
}

La única diferencia con la versión anterior es que en la función op además de asignar una opacidad, modificamos los z-index para que el li actual siempre quede en un plano superior al del resto de elementos de la lista.

Ahora el script pesa 1,86Kb, y 1,49 minimizado.

Esta entrada se publicó el 5 de julio de 2010, se archivó en JavaScript, y fue etiquetada como , , . Autor: Saúl González Fernández. Hay 13 comentarios ›.

Comentarios

  1. Rob dice:
    24/02/2011 a las 9:50

    Aparentemente la capa de enlace no funciona (al menos a mi) en IE. ¿Alguna sugerencia?

  2. Saúl González dice:
    24/02/2011 a las 12:58

    ¿Qué versión de Internet Explorer estás empleando? Acabo de probar la 8 (normal y en vista de compatibilidad) y no me da problemas…

  3. Rob dice:
    25/02/2011 a las 11:21

    Pues es in Vista 64 con el IE versión 8.0.6001.19019 y lo que pruebo es el ejemplo que hay más arriba (URL: http://www.digitalicon.es/ejemplos/nuevo-carrusel/carrusel-01.htm).

    Y tanto en modo normal como en modo compatibilidad, la capa blanca semitransparente donde aparecen los textos 01, 02 y 03 para cada una de las capas respectivamente, no sale. Y si haces click no hace el vínculo. De hecho, ni si quiera aparece el cursor de la mano.

    Si te sirve de ayuda sólo me pasa en el IE.

  4. Saúl González dice:
    02/03/2011 a las 12:21

    Vale, ya he localizado el problema.

    Los vínculos no funcionan bien porque ese ejemplo que me comentas es de la versión anterior del script; si pruebas el ejemplo de la nueva (http://www.digitalicon.es/ejemplos/nuevo-carrusel/carrusel-02.htm) funcionan.

    Sobre lo de que no aparezca la capa semitransparente, es porque en la hoja de estilo el fondo lo hemos aplicado con background:rgba(255,255,255,0.3);, y la sintaxis RGBa aún no tiene soporte en Explorer 8. Puedes lograr ese efecto con un PNG-24 semitransparente como imagen de fondo. Echa un vistazo a esta entrada que publiqué hace tiempo, igual te sirve de ayuda.

  5. Bob dice:
    02/03/2011 a las 18:51

    Acabo de ver la respuesta #4. Mañana mismo lo pruebo. Muchas gracias por todo.

  6. Antonio dice:
    19/05/2011 a las 7:45

    Saludos.

    Felicidades por el tutorial, de los mejores que he encontrado, y claro, no he dudado en usarlo.
    Más o menos todo bien, toqueteando algo, pero tengo un problema.

    En la página donde lo he puesto, carga otras muchas cosas, y en principio, cargo 3 imágenes para este carrusel.

    El problema lo tengo en que mientras carga todo, las 3 imágenes se me ven una a continuación de la otra… lógico ya que son… ¿cómo puedo hacerlo para que sólo se vea la primera… y las siguientes ya cuando empiece el carrusel?

    Muchas gracias.

  7. Saúl González dice:
    21/05/2011 a las 8:48

    Si te fijas en la CSS que hemos aplicado al carrusel, tenemos #diapos con un estilo que se ve cuando aún no se ejecuta el script y otro para #diapos-on cuando sí lo hace. Si quieres que desde un primer momento las imágenes aparezcan ya superpuestas, aplica a #diapos una posición relativa y este estilo a los elementos de la lista:

    
#diapos li{
  position:absolute;
  top:0;
  left:0;
  width:700px;
  height:350px;
  list-style:none;
}

    No obstante, ten en cuenta que en este caso si el script falla el usuario se quedará sin la información de algunas de las imágenes.

  8. Antonio dice:
    23/05/2011 a las 14:25

    Perfecto… Funcionó, muchas gracias.

  9. Jorge dice:
    12/06/2011 a las 13:55

    No hay nada como leer, ya me he dado cuenta, en CSS colocas las imagenes de precarga en la posición absoluta, gracias.

  10. Manolo dice:
    27/02/2012 a las 2:30

    Hola Saúl, una pregunta, ¿cómo se podría poner un vinculo a la imagen? En este ejemplo el vínculo se ejecuta cuando clicamos en las letras 01, 02…

  11. Saúl González Fernández dice:
    27/02/2012 a las 8:47

    @Manolo: Tienes que modificar el marcado para que la imágen quede dentro del vínculo:

    
<ul id="diapos">
  <li><a href="#d01"><img src="01.jpg" alt="" height="350" width="700" /></a></li> 
  <li><a href="#d02"><img src="02.jpg" alt="" height="350" width="700" /></a></li> 
  <li><a href="#d03"><img src="03.jpg" alt="" height="350" width="700" /></a></li> 
</ul>
  12. Manolo dice:
    05/03/2012 a las 19:40

    Hola Saúl, por mas que miro y remiro no encuentro por ningun sitio la forma de saber cómo insertar los codigos en mi web, ¿podrías decirme dónde puedo encontrar algo? Lo pruebo en Dreamweaver y funciona perfecto, lo único es que he subido el .js a mi hosting y cuando inserto la ruta no me funciona, sólo funciona cuando está en el mismo directorio.

  13. Saúl González Fernández dice:
    06/03/2012 a las 8:54

    @Manolo: Por lo que me comentas del directorio es posible que la ruta que vincula al .js sea errónea. En la cabecera del ejemplo verás una línea como ésta:

    
<script type="text/javascript" src="DP.js"></script>

    Asegúrate que src apunta a la localización correcta del script.

    Si quieres mándame una dirección de prueba de la página por medio del formulario de contacto y veré si puedo echarte una mano.

¿Algún comentario?

* Los campos con un asterisco son necesarios

Últimos proyectos

© Digital Icon, S.L., 2007 – 2012