Buenos dias , porfavor solicito de su ayuda ,
necesito hacer un par de funciones
para que al precionar un boton un contenedor con 4 divs se mueva , se que tengo que hacerlo con setInterval pero no tengo idea de como
este ejemplo es similar a lo que ocupo
solo que necesito establecer la posicion del div en el momento que se oprime cada boton
<!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>Documento sin título</title>
<style>
#cuadros
{
width:1600px;
height:250px;
background-color:#F00;
position:relative;
text-align:center;
line-height:50px;
color:white
}
.principal
{
width:400px;
height:300px;
background:#CCC;
margin:0 auto;
overflow:hidden;
}
.cuadroUno {width:400px; height:250px; background-color:#006; float:left;}
.cuadroDos {width:400px; height:250px; background-color:#066; float:left;}
.cuadroTres {width:400px; height:250px; background-color:#963; float:left;}
.cuadroCuatro {width:400px; height:250px; background-color:#39F; float:left;}
.btn
{
display: inline;
}
</style>
<script type="text/javascript">
var ancho = 400;
var posicion =0;
var intervalo
function moverUno()
{
if(posicion>0)
{
clearTimeout()
posicion=0;
return;
}
posicion==0;
document.getElementById("cuadros").style.left= 0+'px';
intervalo=setTimeout( function(){ moverDos() },20 ); }
function moverDos()
{
if(posicion>ancho)
{
clearTimeout()
posicion=0;
return;
}
posicion+=5;
document.getElementById("cuadros").style.left=-(posicion-5)+'px';
intervalo=setTimeout( function(){ moverDos() },20 ); }
function moverTres()
{
if(posicion>ancho)
{
posicion=0;
return;
}
posicion+=5;
document.getElementById("cuadros").style.left=-(posicion*2-10)+'px';
intervalo=setTimeout( function(){ moverTres() },20 ); }
function moverCuatro()
{
if(posicion>ancho)
{
posicion=0;
return;
}
posicion+=5;
document.getElementById("cuadros").style.left=-(posicion*3-15)+'px';
intervalo=setTimeout( function(){ moverCuatro() },20 ); }
</script>
</head>
<body>
<div class="principal">
<div class="btn" onClick="moverUno()"> uno </div>
<div class="btn" onClick="moverDos()"> dos </div>
<div class="btn" onClick="moverTres()"> tres </div>
<div class="btn" onClick="moverCuatro()"> cuatro &n bsp;</div>
<div id="cuadros">
<div class="cuadroUno"></div>
<div class="cuadroDos"></div>
<div class="cuadroTres"></div>
<div class="cuadroCuatro"></div>
</div>
</div>
</body>
</html>
