Controler un slider avec les flèches du claviers
Bonjour,
Je suis très débutant dans la programmation, mais je me lance dans la confection d'une page pour héberger une BD que je fais. Je suis assez content du résultat, mais j'ai quelques problèmes que je n'arrive pas à régler.
Voici le site en question: http://corentinpenloup.com/tekno.html (c'est un lien privé )
j'aimerais pouvoir contrôler mon slider avec les flèches du clavier,
J'ai récupérer un script tout fait et je ne sais pas comment intégrer cette fonction. j'ai pas mal chercher, mais j'avoue que je suis un peu perdut. Voici le code en question.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
| </div>
<!-- Les fleches de navigations -->
<img src="resources_slider/fleche-gauche_02.png" id="fleche_gauche" class="fleche" onClick="prevImage()">
<img src="resources_slider/fleche-droite_02.png" id="fleche_droite" class="fleche" onClick="nextImage()">
</div>
<script>
// Des Variables pour pouvoir modifier facilement ce qui doit l'être
var image = 1;
var maxImages = 42;
var slider = document.getElementById('slider');
var timeout
// La fonction qui change les images. Peut pointer vers une image spécifique, ou bien être appelée vide, pour passer ç celle d'apres
function changeImage(requiredImage) {
// Début de l'algorithme .
if (!requiredImage && requiredImage != 0){ //Si nous n'avons pas spécifié une image
if(image < maxImages){// Si l'image n'est pas la dernière, on avance d'une image
image++;
}
else{
image = 1;//Si Nous sommes sur la dernière, on reviens au début
}
}
else{ // Si nous avont spécifié une image
if(requiredImage > maxImages){//Si nous avont spécifié une image au dela de la dernière, on revient à la première
image = 1;
}
else if(requiredImage < 1){ //Si nous avont spécifié une image 0 ou moins, on vas à la dernière image
image = maxImages;
}
else{
image = requiredImage; // Sinon, on vas à l'image spécifiée.
}
}
//On dis au slider à travers sa classe quel image il doit afficher
slider.className = "image"+image;
// On nettoie et relance le timeout
clearTimeout(timeout)
timeout = setTimeout("changeImage()",secDuration*1000);
}
//Deux petites fonctions tres compréhensibles
function nextImage(){
changeImage(image+1);
}
function prevImage(){
changeImage(image-1);
}
onKeyPress="if (event.keyCode == 37) prevImage()"
onKeyPress="if (event.keyCode == 39) nextImage()"
//On met le slide sur l'image par défaut, ici la 1ere
changeImage(1);
</script><br /> |
Si quelqu'un pouvait m'aider, je lui en serait trés reconnaissant ;)
Merci
