Tema: Eventos del teclado no funciona
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 21/07/2012, 23:12
Avatar de Ex_shadow
Ex_shadow
 
Fecha de Ingreso: febrero-2012
Ubicación: Calera Avellaneda, Buenos Aires, Argentina, Argentina
Mensajes: 95
Antigüedad: 12 años, 8 meses
Puntos: 4
Pregunta Eventos del teclado no funciona
Hola chic@s ! necesito ayuda con un carrousel que estoy haciendo solo manejandolo con los eventos del teclado

La idea : Pasar los cuadros (li) con tan solo mover las flechas (izquierda,derecha)

El problema: No funciona, no tiene ninguna accion, no tiene error (Esto es lo que me vuelve loco... no entender por que no hay error o por que no funciona)


les paso el script , cualquier aportacion me ayudaria , gracias desde ya !

Código HTML: 
Ver original
  1. <html>
  2.  
  3.     <head>
  4.         <!-- Carrousel --->
  5.         <link type="text/css" rel="stylesheet" href="Carrousel/carrousel.css">
  6.         <script type="application/javascript" src="Carrousel/javascript.js"></script>
  7.         
  8.     </head>
  9.  
  10. <body>
  11.  
  12. <!-- Slider --->
  13. <div id="Slider">
  14.     
  15.     <!-- Carrousel --->
  16.     <ul class="Carrousel">
  17.         
  18.         <li id="Arte_1" class="Select">
  19.             <img src="@Imagen" />
  20.             <p>@Informacion</p>
  21.         </li>
  22.         
  23.         <li id="Arte_2">
  24.             <img src="@Imagen" />
  25.             <p>@Informacion</p>
  26.         </li>
  27.         
  28.         <li id="Arte_3">
  29.             <img src="@Imagen" />
  30.             <p>@Informacion</p>
  31.         </li>
  32.  
  33.         <li id="Arte_4">
  34.             <img src="@Imagen" />
  35.             <p>@Informacion</p>
  36.         </li>
  37.  
  38.         <li id="Arte_5">
  39.             <img src="@Imagen" />
  40.             <p>@Informacion</p>
  41.         </li>
  42.         
  43.     </ul>
  44.  
  45. </div>
  46.  
  47.  
  48.  
  49. </body></html>


Código CSS: 
Ver original
  1. @charset "utf-8";
  2.  
  3. /* --- Slider --- */
  4. #Slider{
  5.     display:block;
  6.     
  7.     width:600px;
  8.     
  9.     border:1px solid #ccc;
  10.     
  11.     margin:0 auto;
  12.     
  13.     padding:5px;
  14.     
  15.     overflow:hidden;
  16. }
  17.  
  18. /* --- Carrousel --- */
  19. #Slider > .Carrousel{
  20.     display:table;
  21.     
  22.     margin:0; padding:0;
  23.     
  24.     width:5000px;
  25.  
  26.     position:relative;
  27.     
  28.     left:-0px;
  29.     
  30.     -webkit-transition:all 1.5s ease-in-out;
  31. }
  32.  
  33. #Slider > .Carrousel > li{
  34.     display:table;
  35.     
  36.     width:175px;
  37.     height:175px;
  38.     
  39.     margin:0; padding:0;
  40.     
  41.     margin-right:25px;
  42.     
  43.     position:relative;
  44.     
  45.     float:left;
  46.  
  47.     opacity:0.5;
  48.     
  49.     -webkit-transition:all 0.5s ease-in-out;
  50. }
  51.  
  52. #Slider > .Carrousel > li.Select{
  53.     opacity:1;
  54. }
  55.  
  56. #Slider > .Carrousel > li > img{
  57.     width:100%;
  58.     height:100%;
  59. }
  60.  
  61. #Slider > .Carrousel > li > p{
  62.     display:table;
  63.     
  64.     background:#000;
  65.     
  66.     color:#eee;
  67.     
  68.     width:100%;
  69.     
  70.     font-family:Arial;
  71.     font-style:italic;
  72.     font-size:12px;
  73.     
  74.     position:absolute;
  75.     
  76.     padding:5px;
  77.     
  78.     bottom:-15;
  79.     left:0px;
  80. }


Código Javascript: 
Ver original
  1. var carrousel = document.getElementsByClassName('Carrousel'); // --- Id del carrousel
  2. var Imagen = 1; // --- Valor de imagen
  3. var left = 0; // --- Posicion carrousel
  4. var clase = 'Select'; // --- Clase seleccionada
  5. var iden = 'Arte_';
  6.  
  7. /* --- Flechas --- */
  8. function Flechas(e){
  9.   
  10.     /* --- Evento --- */
  11.     var evento = e || window.event;
  12.  
  13.     alert(evento.keyCode); /* Este alert no funciona con las flechas , pero si con el cualquier tecla :S */
  14.  
  15.     /* --- Variables --- */
  16.     var li = document.querySelector('.Carrousel[li]');
  17.     var Cantidad = document.querySelector('.Carrousel > li').length;
  18.  
  19.     /* --- Derecho --- */
  20.     if(evento.keyCode==39){
  21.         
  22.         if(Imagen <= Cantidad && left==0){
  23.             left=180;
  24.             carrousel[0].style.left += 180;
  25.             Imagen++; 
  26.         }
  27.         
  28.         if(Imagen <= Cantidad && left!=0){
  29.         carrousel[0].style.left += 200;Imagen++;
  30.         }
  31.  
  32.     }
  33.     
  34.     /* --- Izquierdo --- */
  35.     if(evento.keyCode==37){
  36.         
  37.         if(Imagen <= Cantidad && left==0){
  38.         left=180;carrousel[0].style.left -= 180;Imagen--;
  39.         
  40.         }
  41.         
  42.         if(Imagen <= Cantidad && left!=0){
  43.         carrousel[0].style.left -= 200;Imagen--;
  44.         }
  45.         
  46.     }
  47.     
  48.     /* --- Enter --- */
  49.     if(evento.keyCode==13){
  50.         
  51.         Informarme();
  52.         
  53.     }
  54.  
  55.     /* --- Clases --- */
  56.     li.removeAttribute('class');
  57.     document.getElementById(iden+Imagen).className = clase;
  58.     
  59. }
  60.  
  61. window.onload = function() {
  62.   document.onkeypress = Flechas;
  63. }