Ver Mensaje Individual
  #5 (permalink)  
Antiguo 19/04/2013, 22:52
Anarko
 
Fecha de Ingreso: febrero-2004
Mensajes: 1.987
Antigüedad: 20 años, 2 meses
Puntos: 22
Respuesta: SIN JQuery, cómo cambiar contenido de DIV haciendo efecto de MOVIMIENTO ?

Cita:
Iniciado por caricatos Ver Mensaje
Gracias Pepe.

No la entendí y es laaargo el código...

Cita:
Iniciado por IsaBelM Ver Mensaje
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 :(