Tema: ¿Como usar este script para rotar textos mas de una vez por pagina?
Ver Mensaje Individual
  #15 (permalink)  
Antiguo 22/05/2014, 08:43
Avatar de Italico76
Italico76
 
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 17 años, 7 meses
Puntos: 292
Respuesta: ¿Como usar este script para rotar textos mas de una vez por pagina?
Lo prometido es deuda:

Código Javascript: 
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
  2. <html>
  3. <head>
  4. <style>
  5.     .textToRead {display:none;}
  6. </style>
  7.  
  8. <script>
  9.  
  10.     /*
  11.         @author: Pablo Bozzolo (de modificaciones)      
  12.     */
  13.     var rotatingTextElement;
  14.     var rotatingText = new Array();
  15.     cont = new Array(); 
  16.  
  17.     
  18.     function initRotateText() 
  19.     {
  20.         rotatingTextElement_list = document.getElementsByClassName("textToChange"); 
  21.         aLeer_list = document.getElementsByClassName("textToRead");         
  22.         
  23.         idens = new Array(); // identificadores (sec_1, etc.)
  24.         aCambiar_elem  = new Array(); // textos leidos 
  25.         content = new Array();
  26.         cant_reading_texts = new Array();
  27.         
  28.         var iden_ix = -1; 
  29.         
  30.         for (var i = 0; i < aLeer_list.length; i++)
  31.         {       
  32.             // temp
  33.             var sec = aLeer_list[i].getAttribute("class").split(" ")[1];
  34.             
  35.             if (idens.indexOf(sec) == -1)
  36.             {
  37.                 idens.push(sec);
  38.                 iden_ix++;
  39.                 content[iden_ix] = new Array();
  40.                 cant_reading_texts[iden_ix] = new Array();
  41.                 cant_reading_texts[iden_ix] = 1;
  42.                 cont.push(0);
  43.             }else 
  44.                 cant_reading_texts[iden_ix]++;
  45.             
  46.             
  47.             content[iden_ix].push(aLeer_list[i].innerHTML); 
  48.             
  49.             // temp
  50.             var aCambiar = 'textToChange '+sec; 
  51.                     
  52.             // array de DIVs donde va a haber rotacion
  53.             aCambiar_elem[iden_ix] = document.getElementsByClassName(aCambiar)[0];  
  54.             
  55.             //aCambiar_elem[iden_ix].innerHTML = 'Hola Mundo';
  56.             //console.log (aCambiar_elem[iden_ix].innerHTML);           
  57.         }
  58.                 
  59.         rotateText();   
  60.         
  61.         setInterval(rotateText, 2300);
  62.     }
  63.     
  64.     
  65.     function rotateText() { 
  66.                     
  67.         for (var iden_ix = 0; iden_ix < idens.length; iden_ix++)
  68.         {
  69.             identificador = idens[iden_ix];     
  70.             
  71.             aCambiar_elem[iden_ix].innerHTML = content[iden_ix][cont[iden_ix]];
  72.                         
  73.             cont[iden_ix]++;
  74.                     
  75.             
  76.             if(cont[iden_ix] >= cant_reading_texts[iden_ix])
  77.                 cont[iden_ix] = 0;
  78.             
  79.         }   
  80.     }
  81.     
  82. </script>
  83. </head>
  84. <body onload="initRotateText();">
  85.     
  86.     <p class="textToRead sec_1"/>
  87.     Dependency Injection: Huh?
  88.     <p class="textToRead sec_1"/>
  89.     Otro texto largo y aburridor 
  90.         
  91.     <p class="textToRead sec_1"/>
  92.     Otro texto masss largo y aburridor 
  93.         
  94.     <p class="textToRead sec_1">
  95.     Otro texto masss largo y mssssssss aburridor!!! 
  96.     <p/>    
  97.     
  98.     <p class="textToRead sec_2"/>
  99.     Que feliz que estoy de estar vivo! 
  100.         
  101.     <p class="textToRead sec_2">
  102.     Otro parrafo MUY motivador 
  103.     <p/>    
  104.     
  105.     <p class="textToRead sec_3"/>
  106.     Hablemos de carros :) 
  107.         
  108.     <p class="textToRead sec_3"> 
  109.     Emm...  
  110.     <p/>    
  111.     
  112.     <p class="textToRead sec_3">
  113.     Ya me aburri!!! 
  114.     <p/>    
  115.     
  116.     <!-- aca se muestra : -->
  117.     <div class="textToChange sec_1">
  118.     
  119.     </div>
  120.     
  121.     <!-- aca se muestra : -->
  122.     <div class="textToChange sec_2">
  123.     
  124.     </div>
  125.     
  126.     <!-- aca se muestra : -->
  127.     <div class="textToChange sec_3">
  128.     
  129.     </div>
  130.     
  131. </body>
  132. </html>

Efectos ? se pueden agregar pero de por si..... tiene muchas ventajas en cuanto a ser un codigo prolijo, no repetitivo y no requiere librerias externas.

Es mas general de lo que pudieras pensar... si en vez de poner "sec_1" pornes "grupo1" .. u otra cosa sigue funcionando.. de hecho puedes poner

grupo1, seccion2, equipo3 ... lo importante es que dentro de "cada grupo" seas concistente con los nombres de las clases
__________________
Salu2!