Images aléatoires sans doublon en Javascript
Slay
-
creadiff Messages postés 483 Statut Membre -
creadiff Messages postés 483 Statut Membre -
Bonjour,
Je suis en train de réaliser un site et sur la home, 5 images sont aléatoires.
J'ai trouvé un script sur le net mais celui-ci autorise les doublons.
Serait-il possible de rajouter quelque chose dans le code (comme des if) qui bloque les doublons?
J'ai aussi le soucis que le nombre d'image ne peux pas dépasser les 9 sinon ça fonctionne mal!
Je ne m'y connais pas assez en js pour tenter de bidouiller moi-même ^^
Je vous mets le code js:
function randomImg(){
document.getElementById('image').src = "images/poupees/face" + Math.round(Math.random()*9+1) + ".jpg";
document.getElementById('image2').src = "images/poupees/face" + Math.round(Math.random()*9+1) + ".jpg";
document.getElementById('image3').src = "images/poupees/face" + Math.round(Math.random()*9+1) + ".jpg";
document.getElementById('image4').src = "images/poupees/face" + Math.round(Math.random()*9+1) + ".jpg";
document.getElementById('image5').src = "images/poupees/face" + Math.round(Math.random()*9+1) + ".jpg";
}
Et le code dans le html:
<div class=photos>
<div class=img1><img src="images" width="95" height="143" id="image" border="2"/></div>
<div class=img2><img src="images" width="124" height="185" id="image2" border="2"/></div>
<div class=img3><img src="images" width="156" height="231" id="image3" border="2"/></div>
<div class=img4><img src="images" width="124" height="185" id="image4" border="2"/></div>
<div class=img5><img src="images" width="95" height="143" id="image5" border="2"/></div>
</div>
Merci beaucoup de votre aide!
Je suis en train de réaliser un site et sur la home, 5 images sont aléatoires.
J'ai trouvé un script sur le net mais celui-ci autorise les doublons.
Serait-il possible de rajouter quelque chose dans le code (comme des if) qui bloque les doublons?
J'ai aussi le soucis que le nombre d'image ne peux pas dépasser les 9 sinon ça fonctionne mal!
Je ne m'y connais pas assez en js pour tenter de bidouiller moi-même ^^
Je vous mets le code js:
function randomImg(){
document.getElementById('image').src = "images/poupees/face" + Math.round(Math.random()*9+1) + ".jpg";
document.getElementById('image2').src = "images/poupees/face" + Math.round(Math.random()*9+1) + ".jpg";
document.getElementById('image3').src = "images/poupees/face" + Math.round(Math.random()*9+1) + ".jpg";
document.getElementById('image4').src = "images/poupees/face" + Math.round(Math.random()*9+1) + ".jpg";
document.getElementById('image5').src = "images/poupees/face" + Math.round(Math.random()*9+1) + ".jpg";
}
Et le code dans le html:
<div class=photos>
<div class=img1><img src="images" width="95" height="143" id="image" border="2"/></div>
<div class=img2><img src="images" width="124" height="185" id="image2" border="2"/></div>
<div class=img3><img src="images" width="156" height="231" id="image3" border="2"/></div>
<div class=img4><img src="images" width="124" height="185" id="image4" border="2"/></div>
<div class=img5><img src="images" width="95" height="143" id="image5" border="2"/></div>
</div>
Merci beaucoup de votre aide!
7 réponses
-
Voilà ! Et sans doublons s'il vous plaît. J'ai pas testé, mais ça devrait fonctionner.
<style type="text/css"> .photos {border:solid 2px #888} </style> <div id="photos"></div> <script type="text/javascript"> var nbPhotosSurServeur = 9; var nbPhotosAffichees = 5; var photosDejaAffichees = {}; var html = ''; for(var i=0 ; i<nbPhotosAffichees ; i++){ var numPhoto; do{ numphoto=Math.ceil(nbPhotosSurServeur*Math.random()) } while (photosDejaAffichees[numphoto]); html += '<img src="images/poupees/face' + numphoto + '.jpg" />'; } document.getElementById('photos').innerHTML = html; </script> -
Merci beaucoup de ta réponse mais en fait, je n'arrive pas à l'appliquer à mon code..
J'ai mis la partie script dans le header et le reste dans la partie body, en remettant la même chose dans la div "photos".
Que dois-je faire d'autre?
Encore merci= -
Il faut l'écrire dans l'ordre indiqué... si le <script> est placé dans le <header>, il y aura une erreur : en effet, la page étant parsée de façon linéaire, il n'y aura pas encore de div ayant pour id "photos" au moment de l'exécution du script.
Il faut soit mettre le script après le <div>, soit mettre le code dans unwindow.onload = function(){ [code à exécuter] } -
Super! ça marche comme ça effectivement ^^
Maintenant ma question c'est: comment je fais pour avoir un style différent pour chaque image?
(comme dans mon code html de base)
Encore merci de tes réponses! -
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
Euh... pourquoi ? Pour gérer les portrait/paysage par exemple ?
-
Je voudrais que les images soient de 3 tailles différentes en fait: petite, moyenne, grande, moyenne, petite
-
Alors là, pas d'idée...
A moins de renseigner une liste d'images au départ, du style :
var photos = [ ['url de la premiere image', 320, 240], ['url de la deuxième image', 240, 480], ['url de la troisième image', 320, 240] ];
On pourrait ensuite utiliser les nombres aléatoires générés dans la boucle for(){} pour parcourir ce tableau, et affecter les attributs src, width et height qui conviennent à l'img concernée.
