Faire défiler un lot d'images

Faire défiler un lot d'images - HTML/CSS - Programmation

Marsh Posté le 05-10-2005 à 16:35:04    

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.
 


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 :
  1. var image = new Array();
  3. image[0] = new Array();
  4. image[0][0] = new Image();  image[0][0].src= '11.jpeg'
  5. image[0][1] = new Image(); image[0][1].src= '12.jpeg'
  6. image[0][2] = new Image(); image[0][2].src= '13.jpeg'
  7. image[0][3] = new Image(); image[0][3].src= '14.jpeg'
  9. image[1] = new Array();
  10. image[1][0] = new Image();  image[1][0].src= '21.jpeg'
  11. image[1][1] = new Image(); image[1][1].src= '32.jpeg'
  12. image[1][2] = new Image(); image[1][2].src= '33.jpeg'
  14. image[2] = new Array();
  15. image[2][0] = new Image();  image[2][0].src= '31.jpeg'
  16. image[2][1] = new Image(); image[2][1].src= '32.jpeg'
  17. 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 :
  1. var nb_lots_images = 3
  2. var compteur_images = new Array();
  4. for (var j = 0 ; j < nb_lots_images ; j++)
  5. {
  6. compteur_images[j] = 0;
  7. }


 
 
 
 
Et voici la fonction d'animation :
 

Code :
  1. function affichage (j,k)
  2. {
  3. document.images[j].src = image[j][k].src;
  4. }
  5. function Animation()
  6. {
  8. var k;
  10. if(i > 3) i = 0;
  13. //j est le numéro du lot
  14.         //k est le numéro de l'image dans le lot
  15. for (var j = 0 ; j < nb_lots_images ; j++ )
  16. {
  17.  k = compteur_images[j];
  19.  window.setTimeout("affichage(j,k)",2000);
  21.  compteur_images[j]++;
  22.  if (compteur_images[j] > image[j].length)
  23.   compteur_images[j] = 0
  25. }
  27. i = i + 1;
  28. window.setTimeout("Animation()",2000);
  29. }
  30. window.setTimeout("Animation()",2000);


 
 
Mais voila, je n'arrive pas à faire défiler une par une.  
Lorsque je mets directement document.images[j].src = image[j][k].src; dans la boucle for, les lots défilent en meme temps.  
 
J'ai donc essayé d'utiliser une fonction intermédiaire ( affichage (j,k) ) avec un setTimeout mais cela ne fonctionne plus du tout maintenant.  
 
Que puis je faire ?
 
 
Ais je été suffisamment explici
te ?


Message édité par weed le 07-10-2005 à 17:49:39
Reply

Marsh Posté le 05-10-2005 à 16:35:04   

Reply

Marsh Posté le 05-10-2005 à 17:41:51    


je suis desolé mais je ne comprends pas le javascript (
 
je te souhaite une bonne chance
 

Reply

Marsh Posté le 05-10-2005 à 18:08:49    

oki, merci mansour
 
pour les autres, ceux qui connaissent le JS, est ce que j'ai été sufissemment explicite ?

Reply

Marsh Posté le 05-10-2005 à 18:38:07    

Oui, et vu ton code, c'est normal que ca change pour tous les groupes d'images vu que c'est qu'est défini comme comportement du code.
Si tu veux pas ça, alors ne boucle pas sur les lots mais utilise plustôt la variable i pour savoir avec quel lot travailler.

Reply

Marsh Posté le 05-10-2005 à 18:50:01    

hey topaing weed, tu veux une technique toute conne ???
 
<div id="defilimg">
<img src="truc1.jpg'>
<img src="truc2.jpg'>
<img src="truc3.jpg'>
<img src="truc4.jpg'>
<img src="truc5.jpg'>
</div>
 
ensuite avec un script fait scroller sur la droite ton bordel, soit au pixel, soit par tranches de 30 px. ou de largeurIMGpx
 
bien entendu ton div il est en overflow:hidden
 
stu veux jte fais le script, même si bien sur tu n'aimes pas qu'on te fasse tout

Reply

Marsh Posté le 05-10-2005 à 20:03:23    

gatsusat > Pourquoi je vois pas le rapport entre ce que tu proposes et ce qu'il demande?

Reply

Marsh Posté le 07-10-2005 à 10:52:22    

bon alors voilou, s'il faut que je supprime ma boucle for.
je pense que le code est bon mais cela ne fonctionne pas ...
 
La console JS de firefox m'indique :  

Citation :

document.images[i] has no properties


 
kesako ?
 

Code :
  1. <html>
  2. <head></head>
  4. </script>
  5.  
  6. <body>
  7. <img name='image1' src='11.jpeg'>
  8. <img src='21.jpeg'>
  9. <img src='31.jpeg'>
  11. <script type='text/javascript'>
  12. <!--
  13. var image = new Array();
  15. image[0] = new Array();
  16. image[0][0] = new Image();  image[0][0].src= '11.jpeg'
  17. image[0][1] = new Image(); image[0][1].src= '12.jpeg'
  18. image[0][2] = new Image(); image[0][2].src= '13.jpeg'
  19. image[0][3] = new Image(); image[0][3].src= '14.jpeg'
  21. image[1] = new Array();
  22. image[1][0] = new Image();  image[1][0].src= '21.jpeg'
  23. image[1][1] = new Image(); image[1][1].src= '32.jpeg'
  24. image[1][2] = new Image(); image[1][2].src= '33.jpeg'
  26. image[2] = new Array();
  27. image[2][0] = new Image();  image[2][0].src= '31.jpeg'
  28. image[2][1] = new Image(); image[2][1].src= '32.jpeg'
  29. image[2][2] = new Image(); image[2][2].src= '33.jpeg'
  31. var nb_lots_images = 3
  32. var compteur_images = new Array();
  33. var p1 = 0;
  34. var i = 0;
  36. for (var j = 0 ; j < nb_lots_images ; j++)
  37. {
  38. compteur_images[j] = 0;
  39. }
  43. function Animation()
  44. {
  46. if(i > nb_lots_images) i = 0;
  48. p1 = compteur_images[i];
  50. document.images[i].src = image[i][p1].src;
  52. compteur_images[i]++;
  53. if (compteur_images[i] > 2)
  54.  compteur_images[i] = 0
  58. i = i + 1;
  59. window.setTimeout("Animation()",2000);
  60. }
  61. window.setTimeout("Animation()",2000);
  65. //-->
  66. </script>
  67. </body>
  68. </html>


Reply

Marsh Posté le 07-10-2005 à 13:04:55    

[:aurel74]

Reply

Marsh Posté le 07-10-2005 à 17:49:10    

bon j'ai presque trouvé.  
 
mes images défilent bien de gauche à droite  
 
meme si vous avez été extremement méchant parce que vous vouilliez pas m'aider voici mon code :
 

Code :
  1. <html>
  2. <head></head>
  4. </script>
  7. <body>
  8. <img name='image1' src='14.jpeg'>
  9. <img src='23.jpeg'>
  10. <img src='33.jpeg'>
  12. <script type='text/javascript'>
  13. <!--
  14. var image = new Array();
  16. image[0] = new Array();
  17. image[0][0] = new Image();  image[0][0].src= '11.jpeg'
  18. image[0][1] = new Image(); image[0][1].src= '12.jpeg'
  19. image[0][2] = new Image(); image[0][2].src= '13.jpeg'
  20. image[0][3] = new Image(); image[0][3].src= '14.jpeg'
  22. image[1] = new Array();
  23. image[1][0] = new Image();  image[1][0].src= '21.jpeg'
  24. image[1][1] = new Image(); image[1][1].src= '22.jpeg'
  25. image[1][2] = new Image(); image[1][2].src= '23.jpeg'
  27. image[2] = new Array();
  28. image[2][0] = new Image();  image[2][0].src= '31.jpeg'
  29. image[2][1] = new Image(); image[2][1].src= '32.jpeg'
  30. image[2][2] = new Image(); image[2][2].src= '33.jpeg'
  33. var i = 0;    /* i est le nombre d'image dans la séquence */
  34. var img = 0; /* img = 3 est le nombre de lots d'image max */
  35. var nb_image = 2
  36. var compteur = new Array();
  40. for (var k=0 ; k <= nb_image ; k++)
  41. compteur[k]=0;
  43. function Animation()
  44. {
  45. if(img > nb_image) img = 0;
  46. if(compteur[img] > ((image[img].length)-1) ) { compteur[img] = 0;  }
  48. document.images[img].src = image[img][compteur[img]].src;
  50. compteur[img] = compteur[img] + 1;
  54. img = img + 1;
  56. window.setTimeout("Animation()",1000);
  57. }
  58. window.setTimeout("Animation()",1000);
  62. //-->
  63. </script>
  64. </body>
  65. </html>

Reply

Marsh Posté le 07-10-2005 à 17:52:27    

Y a quoi d'autre qu'a changé a par le i transformé en img?
J'arrive pas à voir les différences.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed