Discussion :

[kosa_nostra]

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 :

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

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 !!

PS: dans un but pédagogique, aucun framework n'est autorisé.

Merci ...

[gwyohm]

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.

Tu veux dire que l'image repositionnée n'est pas visible tout de suite ?
-1880 c'est peut être trop ?

[le_chomeur]

bonjour , je te renvois dans les contributions :

http://www.developpez.net/forums/d54...extes-dimages/

[kosa_nostra]

Premièrement merci pour cette réponse rapide.

Non -1880 est exactement l'endroit ou la photo devrait être replacée, le problème est qu'elle ne s'affiche pas avant que la dernière image du slider soit sortie (i.e elle aussi repositionnée a -1880). Je n'arrive pas à avoir sur l'écran une image du début quand une image de fin est encore dans son premier cycle.
Une fois que la dernière image du slider fini son cycle, toutes les autres images s'affichent d'un seul coup (à la position attendue). Comme si elles restaient coincées dans le tampon d'affichage.
C'est vraiment bizarre.

[gwyohm]

Je pense que ton problème vient du fait que toutes tes images ont quasiment au même moment la même valeur de "cpt".
Essaye en faisant ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
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 - 100 * i; //Je les positionnes afin qu'elles ne soient pas visible au chargement de la page.
	}
	initSlider(images, count);
}

[kosa_nostra]

Merci pour l'idée, mais ce n'est pas ça le problème car toute mes images sont en float left et se placent comme il faut.

Le problème c'est que (lire commentaire):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
function moveSmooth(img, cpt) 
{
	if(cpt==1020) 
		cpt= -1880;//Cette opération ne ce fait que lorsque la derniere image a fini son cycle. Du coup les images ne s'enchainent pas !
	img.style.left = cpt+"px";
	cpt+=10;
	setTimeout(function() {moveSmooth(img,cpt);}, 1);
}

Une autre idée ????

[Bovino]

toute mes images sont en float left

Il est là le problème

[kosa_nostra]

Merci à tous vous m'avez tous aider a résoudre ce problème.
Le problème était :
1: le cpt qui partait pour chaque image a -2900
2: le float left
3: la position relative des images (il fallait les mètre en absolue)

Encore merci pour votre présence !!
A la prochaine