Eventos del teclado no funciona

Ex_shadow · #1 (**permalink**) 21/07/2012, 23:12

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<html>
 
    <head>
        <!-- Carrousel --->
        <link type="text/css" rel="stylesheet" href="Carrousel/carrousel.css">
        <script type="application/javascript" src="Carrousel/javascript.js"></script>
        
    </head>
 
<body>
 
<!-- Slider --->
<div id="Slider">
    
    <!-- Carrousel --->
    <ul class="Carrousel">
        
        <li id="Arte_1" class="Select">
            <img src="@Imagen" />
            <p>@Informacion</p>
        </li>
        
        <li id="Arte_2">
            <img src="@Imagen" />
            <p>@Informacion</p>
        </li>
        
        <li id="Arte_3">
            <img src="@Imagen" />
            <p>@Informacion</p>
        </li>
 
        <li id="Arte_4">
            <img src="@Imagen" />
            <p>@Informacion</p>
        </li>
 
        <li id="Arte_5">
            <img src="@Imagen" />
            <p>@Informacion</p>
        </li>
        
    </ul>
 
</div>
 
 
 
</body></html>

Código CSS:

Ver original@charset "utf-8";
 
/* --- Slider --- */
#Slider{
    display:block;
    
    width:600px;
    
    border:1px solid #ccc;
    
    margin:0 auto;
    
    padding:5px;
    
    overflow:hidden;
}
 
/* --- Carrousel --- */
#Slider > .Carrousel{
    display:table;
    
    margin:0; padding:0;
    
    width:5000px;
 
    position:relative;
    
    left:-0px;
    
    -webkit-transition:all 1.5s ease-in-out;
}
 
#Slider > .Carrousel > li{
    display:table;
    
    width:175px;
    height:175px;
    
    margin:0; padding:0;
    
    margin-right:25px;
    
    position:relative;
    
    float:left;
 
    opacity:0.5;
    
    -webkit-transition:all 0.5s ease-in-out;
}
 
#Slider > .Carrousel > li.Select{
    opacity:1;
}
 
#Slider > .Carrousel > li > img{
    width:100%;
    height:100%;
}
 
#Slider > .Carrousel > li > p{
    display:table;
    
    background:#000;
    
    color:#eee;
    
    width:100%;
    
    font-family:Arial;
    font-style:italic;
    font-size:12px;
    
    position:absolute;
    
    padding:5px;
    
    bottom:-15;
    left:0px;
}

Código Javascript:

Ver originalvar carrousel = document.getElementsByClassName('Carrousel'); // --- Id del carrousel
var Imagen = 1; // --- Valor de imagen
var left = 0; // --- Posicion carrousel
var clase = 'Select'; // --- Clase seleccionada
var iden = 'Arte_';
 
/* --- Flechas --- */
function Flechas(e){
  
    /* --- Evento --- */
    var evento = e || window.event;
 
    alert(evento.keyCode); /* Este alert no funciona con las flechas , pero si con el cualquier tecla :S */
 
    /* --- Variables --- */
    var li = document.querySelector('.Carrousel[li]');
    var Cantidad = document.querySelector('.Carrousel > li').length;
 
    /* --- Derecho --- */
    if(evento.keyCode==39){
        
        if(Imagen <= Cantidad && left==0){
            left=180;
            carrousel[0].style.left += 180;
            Imagen++; 
        }
        
        if(Imagen <= Cantidad && left!=0){
        carrousel[0].style.left += 200;Imagen++;
        }
 
    }
    
    /* --- Izquierdo --- */
    if(evento.keyCode==37){
        
        if(Imagen <= Cantidad && left==0){
        left=180;carrousel[0].style.left -= 180;Imagen--;
        
        }
        
        if(Imagen <= Cantidad && left!=0){
        carrousel[0].style.left -= 200;Imagen--;
        }
        
    }
    
    /* --- Enter --- */
    if(evento.keyCode==13){
        
        Informarme();
        
    }
 
    /* --- Clases --- */
    li.removeAttribute('class');
    document.getElementById(iden+Imagen).className = clase;
    
}
 
window.onload = function() {
  document.onkeypress = Flechas;
}

diamari · #2 (**permalink**) 22/07/2012, 06:16

Tienes que utilizar onkeyup o onkeydown.

furoya · #3 (**permalink**) 22/07/2012, 06:45

Prueba cambiar el evento a onkeyup.

Hay más para objetar, pero quizá habría que moverse a CSS.

[edit]

Perdón diamari, no te vi a tiempo.

Imperdonable lo mío.

[/edit]

Ex_shadow · #4 (**permalink**) 22/07/2012, 08:24

Perfecto ! me re ayudarno ! , si veo el cosito de karma se los subo ñ.ñ !

MIL GRACIASSS!!!