Bonjour, je crée un slideshow, avec une grosse image en haut et des miniatures en bas. L'image du haut se déplace en fonction de la vignette que j'ai choisie en bas.
illustration:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
var elementimg = document.querySelectorAll('#navigation li'); /* Je sélectionne toute les balises li */
for (var i = 0, c = elementimg.length; i < c; i++) {
elementimg[i].addEventListener('click', function() {
document.querySelector('section nav ul').style.marginLeft= "-"+ i*940+"px"; /* Je décale "ul" sur la gauche en fonction de la place de la balise li*940 pixels. ex: je clique sur la troisieme balise li, la balise ul se déplace de 2820 pixels sur la gauche */
}, false);		
}
Le problème de cette fonction, c'est qu'au final quelque soit le <li> sur le quel je cliquerais, seul la plus grande valeur de "i" sera retenue, c'est à dire la dernière valeur de "i" dans sa boucle. <ul> se déplacera toujours du même nombre de pixels sur la gauche.
Il faut donc que la variable "i" garde ses différentes valeurs dans chacune des fonctions associé eux événements sur mes différent <li>.
J'ai crus comprendre que les closures servaient précisément dans ce cas précis.
Pouvez vous me le confirmer?
merci