Discussion :

[weed]

Comment faire défiler des images 1 par 1 par lot ?

voila, j'ai 3 lots de 3 ou 4 images que j'aimerais faire défilés une par une

pour facilier ta comprehension 11.jpeg est la premiere du premier lot. 12.jpeg, la 2ème image du premier lot.

Code :

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

1
2
3
4
5
6
7
8
9
 
position de départ : 11.jpeg 21.jpeg 31.jpeg
2 secondes apres  : 12.jpeg 21.jpeg 31.jpeg
2 secondes apres  : 12.jpeg 22.jpeg 31.jpeg
2 secondes apres  : 12.jpeg 22.jpeg 32.jpeg
2 secondes apres  : 13.jpeg 22.jpeg 32.jpeg
2 secondes apres  : 13.jpeg 23.jpeg 32.jpeg
2 secondes apres  : 13.jpeg 23.jpeg 33.jpeg
.......

Bref, l'image de gauche défile puis apres c'est au tour de l'image du millieu, puis celle de droite et on recommence, l'image de gauche défille.


Dans du javascript, j'ai chargé mes images :

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
var image = new Array();
 
image[0] = new Array();
image[0][0] = new Image();  image[0][0].src= '11.jpeg'
image[0][1] = new Image();	image[0][1].src= '12.jpeg'
image[0][2] = new Image();	image[0][2].src= '13.jpeg'
image[0][3] = new Image();	image[0][3].src= '14.jpeg'
 
image[1] = new Array();
image[1][0] = new Image();  image[1][0].src= '21.jpeg'
image[1][1] = new Image();	image[1][1].src= '32.jpeg'
image[1][2] = new Image();	image[1][2].src= '33.jpeg'
 
image[2] = new Array();
image[2][0] = new Image();  image[2][0].src= '31.jpeg'
image[2][1] = new Image();	image[2][1].src= '32.jpeg'
image[2][2] = new Image();	image[2][2].src= '33.jpeg'

puis apres je créé un tableau compteur pour chaque lot. Je pense utilisé cette variable pour faire défilé les images de chaque lots. Chaque lot a besoin de son propre compteur car tous les lots n'ont pas le meme nombre d'image. Ici le premier lot a 4 images (image[0].length) alors 2ème et 3ème ont 3 images.

Code :

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

1
2
3
4
5
6
7
var nb_lots_images = 3 
var compteur_images = new Array();
 
for (var j = 0 ; j < nb_lots_images ; j++)
{
	compteur_images[j] = 0;
}

Et voici la fonction d'animation :

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
function Animation()
 {
 
     if(i > nb_lots_images) i = 0;
 
     p1 = compteur_images[i];
 
     document.images[i].src = image[i][p1].src;
 
     compteur_images[i]++;
     if (compteur_images[i] > 2)
         compteur_images[i] = 0
 
 
 
     i = i + 1;
     window.setTimeout("Animation()",2000);    
 }
     window.setTimeout("Animation()",2000);

[SpaceFrog]

de 0 à nb_lots_images-1

[SpaceFrog]

heu perso je serais passé par un setInterval ...


et lorsque tu as un souci de [i] fais un alert(i) ... ça done une idée du problème ..

[weed]

SpaceFrog, merci pour ta reponse. J'ai trouvé une autre solution mais cela dit, j'aimerais savoir pourquoi j'ai cette erreur par curiosité :

Code :

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

image[i][p1] has no properties

j'ai oublié de le mettre dans mon code, que j'initialise ma variable p1 à 0.
je rappelle que dans un premier temps je mets un max de truc en dur pour isoler l'erreur .....

[weed]

heu perso je serais passé par un setInterval ...


et lorsque tu as un souci de [i] fais un alert(i) ... ça done une idée du problème ..

oui j'aimerais bien mais avec les setTimeOut c'est une vrai plaie car ce n'est pas bloquant, ce qui fait que tu peux pas tellement observer l'evolutions des valeurs variables. Il faut se dépecher à cliquer sur OK sur les boites d'alertes et augmenter le setTimeOut

[SpaceFrog]

1) un alert(image[i][p1]) te retourne quoi ???

2) image est un mot reservé de javascript ... change le nom de la variable ...
essaye avec myimage ou tabimage ???

[weed]

1./
alert(myimages[i][p1]); me renvoie [object HTMLImageElement]

2./ voila c'est fait, j'ai remplacé les image par myimages

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
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
<html>
<head></head>
 
 
<body>
<img name='image1' src='11.jpeg'>
<img src='21.jpeg'>
<img src='31.jpeg'>
 
<script type='text/javascript'>
 <!-- 
var myimages = new Array();
 
myimages[0] = new Array();
myimages[0][0] = new Image();  myimages[0][0].src= '11.jpeg'
myimages[0][1] = new Image();	myimages[0][1].src= '12.jpeg'
myimages[0][2] = new Image();	myimages[0][2].src= '13.jpeg'
myimages[0][3] = new Image();	myimages[0][3].src= '14.jpeg'
 
myimages[1] = new Array();
myimages[1][0] = new Image();  myimages[1][0].src= '21.jpeg'
myimages[1][1] = new Image();	myimages[1][1].src= '32.jpeg'
myimages[1][2] = new Image();	myimages[1][2].src= '33.jpeg'
 
myimages[2] = new Array();
myimages[2][0] = new Image();  myimages[2][0].src= '31.jpeg'
myimages[2][1] = new Image();	myimages[2][1].src= '32.jpeg'
myimages[2][2] = new Image();	myimages[2][2].src= '33.jpeg'
 
var nb_lots_images = 2; 
var compteur_images = new Array();
var p1 = 0;
var i = 0;
 
for (var j = 0 ; j < nb_lots_images ; j++)
{
	compteur_images[j] = 0;
}
 
 
function Animation()
{
 
	if(i > nb_lots_images) i = 0;
 
	p1 = compteur_images[i];
 
	alert(myimages[i][p1]);
 
	document.images[i].src = myimages[i][p1].src;
 
	compteur_images[i]++;
	if (compteur_images[i] > 2)
		compteur_images[i] = 0
 
 
 
	i = i + 1;
	window.setTimeout("Animation()",2000);	
}
	window.setTimeout("Animation()",2000);
 
 
 
 //-->
</script>
</body>
</html>