Faire défiler un lot d'images

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Faire défiler un lot d'images

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.

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 :

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 :

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 :

function affichage (j,k)
{
document.images[j].src = image[j][k].src;
}
function Animation()
{
var k;
if(i > 3) i = 0;
//j est le numéro du lot
//k est le numéro de l'image dans le lot
for (var j = 0 ; j < nb_lots_images ; j++ )
{
k = compteur_images[j];
window.setTimeout("affichage(j,k)",2000);
compteur_images[j]++;
if (compteur_images[j] > image[j].length)
compteur_images[j] = 0
}
i = i + 1;
window.setTimeout("Animation()",2000);
}
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

Publicité

mansour

je suis desolé mais je ne comprends pas le javascript (

je te souhaite une bonne chance

weed

oki, merci mansour

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

omega2

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.

gatsusat

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

omega2

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

weed

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 :

<html>
<head></head>
</script>
<body>
<img name='image1' src='11.jpeg'>
<img src='21.jpeg'>
<img src='31.jpeg'>
<script type='text/javascript'>
<!--
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'
var nb_lots_images = 3
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];
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);
//-->
</script>
</body>
</html>

weed

[:aurel74]

weed

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 :

<html>
<head></head>
</script>
<body>
<img name='image1' src='14.jpeg'>
<img src='23.jpeg'>
<img src='33.jpeg'>
<script type='text/javascript'>
<!--
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= '22.jpeg'
image[1][2] = new Image(); image[1][2].src= '23.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'
var i = 0; /* i est le nombre d'image dans la séquence */
var img = 0; /* img = 3 est le nombre de lots d'image max */
var nb_image = 2
var compteur = new Array();
for (var k=0 ; k <= nb_image ; k++)
compteur[k]=0;
function Animation()
{
if(img > nb_image) img = 0;
if(compteur[img] > ((image[img].length)-1) ) { compteur[img] = 0; }
document.images[img].src = image[img][compteur[img]].src;
compteur[img] = compteur[img] + 1;
img = img + 1;
window.setTimeout("Animation()",1000);
}
window.setTimeout("Animation()",1000);
//-->
</script>
</body>
</html>

omega2

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

FORUM HardWare.fr

Programmation

HTML/CSS

Faire défiler un lot d'images

Sujets relatifs
Superposition images html	Rollover differants sur plusieur images ?? (avec des exemples...)
[PHP] envoi d'images qui se dimentionne et s'ajoute direct sur 1page	La meilleur méthode pour placer des images?
HELP : images EXCEL/VBA en enregistrant sous format HTML	blabla@web
Problème de marge avec des images	Défaut d'affichage dans les images
Faire défiler des images...	[ JS sans doute :D ] faire defiler la page avec une images...
Plus de sujets relatifs à : Faire défiler un lot d'images

Page générée en 0.076 secondes