Tema: funcion para cuatro botones
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 20/12/2012, 16:07
ajimenez83
 
Fecha de Ingreso: diciembre-2012
Mensajes: 1
Antigüedad: 12 años
Puntos: 0
funcion para cuatro botones
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
  1. <script type="text/javascript">
  2.     var ancho = 400;
  3.     var posicion =0;
  4.     var intervalo
  5.     
  6.     function moverUno()
  7.     {
  8.     if(posicion>0)
  9.     {
  10.         clearTimeout()
  11.         posicion=0;
  12.         return;
  13.         }
  14.         posicion==0;
  15.         document.getElementById("cuadros").style.left= 0+'px';
  16.         intervalo=setTimeout( function(){ moverDos() },20 ); }
  17.     
  18.  
  19.     
  20.     function moverDos()
  21.     {
  22.         if(posicion>ancho)
  23.         {
  24.         clearTimeout()
  25.         posicion=0;
  26.         return;
  27.         }
  28.         posicion+=5;
  29.     document.getElementById("cuadros").style.left=-(posicion-5)+'px';
  30.     intervalo=setTimeout( function(){ moverDos() },20 ); }
  31.     
  32.  
  33.     function moverTres()
  34.     {
  35.         if(posicion>ancho)
  36.         {
  37.         
  38.         posicion=0;
  39.         return;
  40.         }
  41.         posicion+=5;
  42.     document.getElementById("cuadros").style.left=-(posicion*2-10)+'px';
  43.     intervalo=setTimeout( function(){ moverTres() },20 ); }
  44.     
  45.     
  46.     function moverCuatro()
  47.     {
  48.         if(posicion>ancho)
  49.         {
  50.         
  51.         posicion=0;
  52.         return;
  53.         }
  54.         posicion+=5;
  55.     document.getElementById("cuadros").style.left=-(posicion*3-15)+'px';
  56.     intervalo=setTimeout( function(){ moverCuatro() },20 ); }
  57.     
  58.     
  59. </script>
Código HTML: 
Ver original
  1. <title>Ejemplo</title>
  2. <style>
  3. #cuadros
  4. {
  5.     width:1600px; 
  6.     height:250px; 
  7.     background-color:#F00;
  8.     position:relative; 
  9.     text-align:center; 
  10.     line-height:50px; 
  11.     color:white
  12. }
  13. .principal
  14. {
  15.     width:400px;
  16.     height:300px;
  17.     background:#CCC;
  18.     margin:0 auto;
  19.     overflow:hidden;    
  20. }
  21. .cuadroUno {width:400px; height:250px; background-color:#006; float:left;}
  22. .cuadroDos {width:400px; height:250px; background-color:#066; float:left;}
  23. .cuadroTres {width:400px; height:250px; background-color:#963; float:left;}
  24. .cuadroCuatro {width:400px; height:250px; background-color:#39F; float:left;}
  25. .btn
  26. {
  27.     display: inline;    
  28. }
  29. </style>
  30.  
  31. </head>
  32. <body>
  33. <div class="principal">
  34. <div class="btn" onClick="moverUno()">&nbsp;&nbsp;uno&nbsp;&nbsp;</div>
  35. <div class="btn" onClick="moverDos()">&nbsp;&nbsp;dos&nbsp;&nbsp;</div>
  36. <div class="btn" onClick="moverTres()">&nbsp;&nbsp;tres&nbsp;&nbsp;</div>
  37. <div class="btn" onClick="moverCuatro()">&nbsp;&nbsp;cuatro&nbsp;&nbsp;</div>
  38.  
  39. <div id="cuadros">
  40.     <div class="cuadroUno"></div>
  41.     <div class="cuadroDos"></div>
  42.     <div class="cuadroTres"></div>
  43.     <div class="cuadroCuatro"></div>
  44.  
  45. </div>
  46. </div>
  47. </body>
  48. </html>