Lo prometido es deuda:
Código Javascript
:
Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style>
.textToRead {display:none;}
</style>
<script>
/*
@author: Pablo Bozzolo (de modificaciones)
*/
var rotatingTextElement;
var rotatingText = new Array();
cont = new Array();
function initRotateText()
{
rotatingTextElement_list = document.getElementsByClassName("textToChange");
aLeer_list = document.getElementsByClassName("textToRead");
idens = new Array(); // identificadores (sec_1, etc.)
aCambiar_elem = new Array(); // textos leidos
content = new Array();
cant_reading_texts = new Array();
var iden_ix = -1;
for (var i = 0; i < aLeer_list.length; i++)
{
// temp
var sec = aLeer_list[i].getAttribute("class").split(" ")[1];
if (idens.indexOf(sec) == -1)
{
idens.push(sec);
iden_ix++;
content[iden_ix] = new Array();
cant_reading_texts[iden_ix] = new Array();
cant_reading_texts[iden_ix] = 1;
cont.push(0);
}else
cant_reading_texts[iden_ix]++;
content[iden_ix].push(aLeer_list[i].innerHTML);
// temp
var aCambiar = 'textToChange '+sec;
// array de DIVs donde va a haber rotacion
aCambiar_elem[iden_ix] = document.getElementsByClassName(aCambiar)[0];
//aCambiar_elem[iden_ix].innerHTML = 'Hola Mundo';
//console.log (aCambiar_elem[iden_ix].innerHTML);
}
rotateText();
setInterval(rotateText, 2300);
}
function rotateText() {
for (var iden_ix = 0; iden_ix < idens.length; iden_ix++)
{
identificador = idens[iden_ix];
aCambiar_elem[iden_ix].innerHTML = content[iden_ix][cont[iden_ix]];
cont[iden_ix]++;
if(cont[iden_ix] >= cant_reading_texts[iden_ix])
cont[iden_ix] = 0;
}
}
</script>
</head>
<body onload="initRotateText();">
<p class="textToRead sec_1"/>
Dependency Injection: Huh?
<p class="textToRead sec_1"/>
Otro texto largo y aburridor
<p class="textToRead sec_1"/>
Otro texto masss largo y aburridor
<p class="textToRead sec_1">
Otro texto masss largo y mssssssss aburridor!!!
<p/>
<p class="textToRead sec_2"/>
Que feliz que estoy de estar vivo!
<p class="textToRead sec_2">
Otro parrafo MUY motivador
<p/>
<p class="textToRead sec_3"/>
Hablemos de carros :)
<p class="textToRead sec_3">
Emm...
<p/>
<p class="textToRead sec_3">
Ya me aburri!!!
<p/>
<!-- aca se muestra : -->
<div class="textToChange sec_1">
</div>
<!-- aca se muestra : -->
<div class="textToChange sec_2">
</div>
<!-- aca se muestra : -->
<div class="textToChange sec_3">
</div>
</body>
</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
