funcion para cuatro botones

ajimenez83 · #1 (**permalink**) 20/12/2012, 16:07

Buenas tardes Chicos soy nueva en esto de javascript y no entiendo muy bien el caso es que ocupo hacer que la funcion que tengo me mueva el div "cuadros" segun la posicion del boton que presione
pero no lo consigo hacer bien si se mueve pero empieza desde 0 indiferentemente si esta en el cuadro 2 o 3 , y ocupo ejemplo que si marqué el boton 2 el div se mueve hasta que llegue al dos y si oprimo el 4 se mueva desde donde esta hasta al 4 asi , no se si es asi como lo tengo o con setInterval
POR FAVOR CHICOS SI ME AYUDAN SE LOS AGRADEZCO DEMASIADO

Código Javascript:

Ver original<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>

Código HTML:

Ver original<title>Ejemplo</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>
 
</head>
<body>
<div class="principal">
<div class="btn" onClick="moverUno()">&nbsp;&nbsp;uno&nbsp;&nbsp;</div>
<div class="btn" onClick="moverDos()">&nbsp;&nbsp;dos&nbsp;&nbsp;</div>
<div class="btn" onClick="moverTres()">&nbsp;&nbsp;tres&nbsp;&nbsp;</div>
<div class="btn" onClick="moverCuatro()">&nbsp;&nbsp;cuatro&nbsp;&nbsp;</div>
 
<div id="cuadros">
    <div class="cuadroUno"></div>
    <div class="cuadroDos"></div>
    <div class="cuadroTres"></div>
    <div class="cuadroCuatro"></div>
 
</div>
</div>
</body>
</html>

IsaBelM · #2 (**permalink**) 20/12/2012, 16:48

pero es que crees que somos idiotas??

tu mini estadística

Cita:

Fecha de Ingreso 20/12/2012
Total de Mensajes 1

para el que no sepa del porqué de mi respuesta
http://www.forosdelweb.com/f13/funci...r-div-1028657/
http://www.forosdelweb.com/f13/mover...erval-1028653/