affichage images aléatoirement

Marsh Posté le 14-01-2016 à 19:36:05

Salut,
j'ai crée un simple tableau en html et dans chaque case du tableau je voudrais mettre une photo. J'aimerai qu'à chaque affichage de la page les photos s'affichent dans un ordre aléatoire. J'ai trouvé un code java script qui permet d'afficher des images aléatoirement en piochant dans un dossier contenant toutes les images, ça fonctionne mais de cette manière il y a souvent des doublons dans les photos affichées.
Quelqu'un aurait il un code qui permettrait d'afficher toutes mes photos de manière aléatoire et sans doublon ?

Reply

Marsh Posté le 14-01-2016 à 19:36:05

Reply

Marsh Posté le 19-01-2016 à 10:02:58

Salut,

Il suffit de gérer un second tableau d'exclusion pour sauvegarder les images et de les supprimer du premier tableau :

Code :

function randomImage(array, exclusion){
var arrayLength = array.length;
var index = Math.floor((Math.random() * arrayLength) + 0);
var image;
//on check que la valeur n'exhiste pas dans l'exclusion
if(array[index].indexOf(exclusion) < 0 || exclusion.length === 0){
//on ajoute l'image dans le tableau d'exclusion
exclusion.push(array[index]);
//on stocke l'image
image = array[index];
/* on le supprime pour éviter les doublons et de rentrer en stackoverflow a cause de la récurrence de la méthode */
array.splice(index,1);
return image
} else{
randomImage(array, exclusion);
}
}
var array = ["img1", "img2", "img3", "img4"];
var exclusion = [];
while(array.length !== 0){
var imageToDisplay = randomImage(array,exclusion);
console.log(imageToDisplay);
}

Voilà, tu pourra afficher tes images uniquement une fois ( il faudra que tu adapte un petit peu le code mais la logique est là )

le lien JSFiddle : https://jsfiddle.net/z6kdfryb/2/

Message édité par OrcusZ le 19-01-2016 à 10:04:01

---------------
Made you your own sentence without believing that of the others...

Reply

Marsh Posté le 19-01-2016 à 16:33:05

Merci pour ton aide mais je ne comprends pas bien, comment on fait ensuite pour afficher les photos ? on peut toujours utiliser la balise <img src=...> ?

Reply

Marsh Posté le 19-01-2016 à 20:08:42

Salut,

A la place du console log tu devra mettre du code javascript/jquery qui te permettra d'afficher les images ( function append ).

Si tu n'en a jamais fait, je te conseille de suivre un tutoriel car sinon tu sera vite limité pour faire ce genre d'effet

Bon courage

---------------
Made you your own sentence without believing that of the others...

Reply

affichage images aléatoirement

Sujets relatifs:

Leave a Replay