Si usas la opción de ver codigo fuente de la pagina cuando estes viendo la demo que te proporcionan podrás ver como lo han hecho, simplemente haz lo mismo...
Si viendo el codigo no lo sabes hacer es que necesitas que te demos la teoria des de cero... para ello antes que los foros estan los manuales...
Pero si tienes dudas concretas pregunta y te responderemos...
Va... una ayuda mas
Código HTML:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Carrusel con efecto de fundido, modificado
‹ Digital Icon: Desarrollo web versátil
</title> *{padding:0;margin:0;border:0;}
body{color:#FFF;background:#333 url(fondo.png) left top repeat-x;}
#diapos-on{border:10px solid #FBFBFB;-moz-box-shadow:0px 2px 20px #000;-webkit-box-shadow:0px 2px 20px #000;box-shadow:0px 2px 20px #000;width:700px;height:350px;margin:5em auto 0;position:relative;}
#diapos-on li{position:absolute;top:0;left:0;width:700px;height:350px;list-style:none;}
#diapos-on li a{display:block;position:absolute;left:0;bottom:0;height:50px;width:680px;padding:10px;background:rgba(255,255,255,0.3);text-decoration:none;font-size:110%;font-weight:bold;color:#FFF;text-shadow:0px 2px 3px #000;}
#contador{width:700px;margin:1em auto 0;}
#contador li{float:left;width:10px;height:10px;margin-right:5px;list-style:none;-moz-box-shadow:0 1px 4px #000;-webkit-box-shadow:0 1px 4px #000;box-shadow:0 1px 4px #000;-moz-border-radius:5px;-webkit-border-radius:5px;}
#contador li a{display:block;text-indent:-999em;background:#4F4E54;width:10px;height:10px;overflow:hidden;-moz-border-radius:5px;-webkit-border-radius:5px;}
#contador li a:focus{border:1px solid #99969D;outline:none;}
#contador li.actual a{background:#99969D;}
div{padding:1em;font-size:110%;font-weight:bold;color:#FFF;text-shadow:0px 2px 3px #000;width:680px;height:100px;margin:700px auto;border:10px solid;}
<script type="text/javascript"> window.onload = DP.inicio;
<li><img src="01.jpg" alt="" height="350" width="700" /><a href="#d01">01
</a></li> <li><img src="02.jpg" alt="" height="350" width="700" /><a href="#d02">02
</a></li> <li><img src="03.jpg" alt="" height="350" width="700" /><a href="#d03">03
</a></li>
este es el codigo fuente de la demo....
y este el archivo DP.js llamado en la linea 19
Código Javascript
:
Ver originalvar 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);
}
}
