Bonjour à tous.
Dans le cadre d'un projet à l'université je dois réalisé un "slider" d'image pour un site web.
L'idée est d'avoir une ligne de 10 images, cachée sur la partie gauche de mon site, et quand l'utilisateur charge la page, ces 10 images commencent a défiler lentement de la gauche vers la droite sans arrêt (i.e quand une image diparait sur la droite, elle a traversé tous le site, elle doit se remettre directement a la queue et recommencer son cycle).
Le problème est que quand une image fini son cycle, je la repositionne au bonne endroit (l'image la plus a droite devient l'image la plus a gauche et ainsi de suite) mais celle ci ne s'affiche pas directement.
Voila mon code javascript :
Voila je ne sais pas si j'ai réussi a ennoncer clairement mon problème, si il vous faut plus d'infos n'hésitez pas !!
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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 var images = Array(); //array containing the slider pictures var count = Array(); //array containing the movement of each picture i.e images[0] got the count[0] counter function initPictures() //load picture into images[] and initialize count[] { for(i=0; i<10; i++) { images[i] = document.getElementById("imageSlider"+i); //Récupération de toute les images contenue dans le html. count[i] = -2900; //Je les positionnes afin qu'elles ne soient pas visible au chargement de la page. } initSlider(images, count); } function initSlider(images, count) { for(i=0;i<10;i++) { moveSmooth(images[i], count[i]); //j'envoie chacune de mes 10 images dans le slider } } function moveSmooth(img, cpt) //pour chaque image, tant qu'elle n'a pas traversé tous le site, je la déplce de 10 pixels { if(cpt==1020) //cette image a traversé tous le site, il faut la repositionner derriere cpt= -1880; img.style.left = cpt+"px"; //je place mon image en fonction de cpt cpt+=10; setTimeout(function() {moveSmooth(img,cpt);}, 1); //je rappelle récursivement moveSmooth avec un temps d'attente afin de voir le mouvement. } window.onload=initPictures
PS: dans un but pédagogique, aucun framework n'est autorisé.
Merci ...
Partager