Cita:
Iniciado por caricatos Gracias Pepe.
No la entendí y es laaargo el código...
Cita:
Iniciado por IsaBelM Gracias IsaBelM.
Lo mas que he logrado es:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
position: relative;
}
html, body {
width: 100%;
height: 100%;
background:#000;
}
.medidas{
min-width: 700px; /* mismo width de #contenedor */
max-width: 700px; /* mismo width de #contenedor */
min-height: 250px; /* mismo height de #contenedor */
max-height: 250px; /* mismo height de #contenedor */
z-index:999;
}
div#contenedor{
margin: 0 auto;
overflow: hidden;
border: 1px solid #CCC;
background:#aa0000;
color:#fff;
}
div#contenedor div.slider{
width: 300%; /* equivale al ancho de 3 imagenes. no tocar */
position: relative;
left: 0;
top: 0;
}
div#contenedor div.slider img {
float: left;
}
.txt{
background:#aabbcc;
text.align:center;
font-size:9em;
}
.txt2{
background:#aa0000;
text.align:center;
font-size:9em;
}
.txt3{
background:#ffb878;
text.align:center;
font-size:9em;
}
</style>
<script type="text/javascript">
function mover(posInicial,posFinal,slider){
if(posInicial<=posFinal){
(function desplazar(){
setTimeout(function(){
if(posInicial>=posFinal){
var clonarImagen=slider.getElementsByTagName('div')[0].cloneNode(true);
slider.appendChild(clonarImagen);
slider.removeChild(slider.getElementsByTagName('div')[0]);
slider.style.left=0;
return;
}
posInicial+=2;
slider.style.left=-posInicial+'%';
desplazar();
},96);
})();
}
setTimeout(function(){mover(0,posFinal,slider);},3000);
}
window.onload=setTimeout(function(){var slider=document.querySelector('div.slider');mover(0,100,slider);},3000);
</script>
</head>
<body>
<div id="contenedor" class="medidas">
<div class="slider">
<div class="txt medidas">UNO</div>
<div class="txt2 medidas">DDD</div>
<div class="txt3 medidas">TTT</div>
<div class="txt medidas">QQQ</div>
</div>
</div>
</body>
</html>
Y como pueden ver, tiene un parpadeo HORROROSO...
No sé cómo corregirlo...
Quiero mover esos DIV, pero el TEXTO aparece de golpe :(