Ver Mensaje Individual
  #2 (permalink)  
Antiguo 08/03/2012, 06:12
quimfv
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 17 años
Puntos: 574
Respuesta: ayudapara insertar codigo.

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.     <title>Carrusel con efecto de fundido, modificado &lsaquo; Digital Icon: Desarrollo web versátil</title>
  5.     <style type="text/css">
  6.         *{padding:0;margin:0;border:0;}
  7.         body{color:#FFF;background:#333 url(fondo.png) left top repeat-x;}
  8.         #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;}
  9.         #diapos-on li{position:absolute;top:0;left:0;width:700px;height:350px;list-style:none;}
  10.         #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;}
  11.         #contador{width:700px;margin:1em auto 0;}
  12.         #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;}
  13.         #contador li a{display:block;text-indent:-999em;background:#4F4E54;width:10px;height:10px;overflow:hidden;-moz-border-radius:5px;-webkit-border-radius:5px;}
  14.         #contador li a:focus{border:1px solid #99969D;outline:none;}
  15.         #contador li.actual a{background:#99969D;}
  16.         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;}
  17.     </style>
  18.     <script type="text/javascript" src="DP.js"></script>
  19.     <script type="text/javascript">
  20.         window.onload = DP.inicio;
  21.     </script>
  22.  
  23.     <ul id="diapos">
  24.         <li><img src="01.jpg" alt="" height="350" width="700" /><a href="#d01">01</a></li>
  25.         <li><img src="02.jpg" alt="" height="350" width="700" /><a href="#d02">02</a></li>
  26.         <li><img src="03.jpg" alt="" height="350" width="700" /><a href="#d03">03</a></li>
  27.     </ul>
  28.     <div id="d01">
  29.         <p>01</p>
  30.  
  31.     </div>
  32.     <div id="d02">
  33.         <p>02</p>
  34.     </div>
  35.     <div id="d03">
  36.         <p>03</p>
  37.     </div>
  38. </body>
  39.  
  40. </html>

este es el codigo fuente de la demo....

y este el archivo DP.js llamado en la linea 19

Código Javascript:
Ver original
  1. var DP = {
  2.     ds: '',
  3.     dA: 0,
  4.     sD: 0,
  5.     tD: 0,
  6.     t: 3000,
  7.     idD: 'diapos',
  8.     nID: 'diapos-on',
  9.     idC: 'contador',
  10.     clC: 'actual',
  11.     IE: false,
  12.     anim: true,
  13.     intv: '',
  14.     lnz: '',
  15.     $: function(el){
  16.         var e = document.getElementById(el); return e;
  17.     },
  18.     op: function(el,v){
  19.         if((v==0)||(v==100)){
  20.             if(DP.IE){
  21.                 el.style.filter='alpha(opacity='+v+')';
  22.                 el.style.zIndex=v;
  23.             } else {
  24.                 el.setAttribute('style','opacity:'+v/100+';z-index:'+v);
  25.             }
  26.         } else {
  27.             (DP.IE) ? el.style.filter='alpha(opacity='+v+')' : el.setAttribute('style','opacity:'+v/100);
  28.         }
  29.     },
  30.     ac: function(c){
  31.         DP.$(DP.idC).getElementsByTagName('li')[DP.dA].className=c;
  32.     },
  33.     fun: function(){
  34.         var i = 100;
  35.         (DP.dA==DP.tD) ? DP.sD = 0 : DP.sD = DP.dA+1;
  36.         DP.intv = setInterval(function(){
  37.             i = i-5;
  38.             if(i>=0){
  39.                 DP.op(DP.ds[DP.dA],i);
  40.                 DP.op(DP.ds[DP.sD],(100-i));
  41.             } else {
  42.                 DP.ac('');
  43.                 (DP.dA==DP.tD) ? DP.dA = 0 : DP.dA++;
  44.                 DP.ac(DP.clC);
  45.                 clearInterval(DP.intv);
  46.                 if(DP.anim){DP.lnz = setTimeout(DP.fun,DP.t);}
  47.             }
  48.         },50);
  49.     },
  50.     manual: function(d){
  51.         clearInterval(DP.intv);clearTimeout(DP.lnz);DP.anim=false;
  52.         DP.op(DP.ds[DP.dA],0);
  53.         DP.op(DP.ds[d],100);
  54.         DP.ac('');
  55.         DP.dA=d;
  56.         DP.ac(DP.clC);
  57.     },
  58.     inicio: function(){
  59.         (navigator.userAgent.match('MSIE')) ? DP.IE = true : DP.IE = false;
  60.         DP.$(DP.idD).id=DP.nID;
  61.         DP.ds = DP.$(DP.nID).getElementsByTagName('li');
  62.         DP.tD = DP.ds.length-1;
  63.         var ct = document.createElement('ul');
  64.         ct.id = DP.idC;
  65.         (DP.$(DP.nID).nextSibling) ? (DP.$(DP.nID).parentNode).insertBefore(ct,DP.$(DP.nID).nextSibling) : (DP.$(DP.nID).parentNode).appendChild(ct);
  66.         for(var i=0;i<=DP.tD;i++){
  67.             DP.op(DP.ds[i],0);
  68.             DP.$(DP.idC).innerHTML += '<li><a href="#" onclick="DP.manual('+i+')">'+(i+1)+'</a></li>';
  69.         }
  70.         DP.op(DP.ds[0],100);
  71.         DP.ac(DP.clC);
  72.         DP.lnz = setTimeout(DP.fun,DP.t);
  73.     }          
  74. }
__________________
Quim
--------------------------------------------------
Ayudar a ayudar es una buena práctica!!! Y da buenos resultados.