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.

Etiquetas: efectos javascript, en menos de 2Kb, javascript no obstrusivo.

Esta entrada se publicó el 5 de Julio de 2010 a las 16:54, y se archivó en JavaScript. Autor: Saúl González. Puede seguir los comentarios de esta entrada a través de RSS 2.0. Puede dejar un comentario o hacer un trackback desde su propio sitio.