Tableaux avec images sélectionnées aléatoirement

**NeymarHenry** · 13/04/2015, 19h41

Bonjour à tous,

Je suis sur un projet en ce moment , et j'aurais besoin de votre aide afin de créer, en JavaScript, un tableau avec des images qui seraient générés aléatoirement sur la page.
J'ai pas mal cherché et j'ai trouvé quelques pistes, mais rien ne fonctionne pour le moment.
Voici mon code:

Code :

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

1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
 
	 var imgArray = ['1.png', '2.png', '3.png', '4.png', '5.png', '6.png', '7.png', '8.png'];
     function imgRandom(imgArr) {
        return imgArr[Math.floor(Math.random() * imgArr.length)];
    }
console.log(imgRandom(img));
 
 
});

Merci

**Darkaurora** · 13/04/2015, 20h45

Peut être en passant la bonne variable. Ton algo est bon pourtant.

Code :

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

1
2
 
console.log(imgRandom(imgArray));

**NeymarHenry** · 16/04/2015, 23h35

Merci de ta réponse, j'ai corrigé ce que tu ma dit et j'ai rajouté une accolade qui manquait , mais ça ne fonctionne toujours pas, rien n'apparaît a l'écran. Mes images sont pourtant bien dans le même dossier.il doit y avoir une erreur dans mon code mais je vois pas où.
Merci

**danielhagnoul** · 17/04/2015, 01h42

Code :

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

1
2
3
4
5
6
7
8
9
$( function(){ // forme abrégée de $(document).ready(function(){
    var imgArray = [ '1.png', '2.png', '3.png', '4.png', '5.png', '6.png', '7.png', '8.png' ];
    function imgRandom( tab ){
        return tab[ Math.floor( Math.random() * tab.length ) ];
    }
    for ( var i = 0; i < 100; i++ ){
        console.log( i, imgRandom( imgArray ) );
    }
});

**NeymarHenry** · 18/04/2015, 13h27

Mon code javascript apparait bien dans firebug, mais toujours rien qui apparait.
Je suis censé mettre quelque chose dans le HTML ou cela ce fait uniquement dans le javascript ?

**NoSmoking** · 18/04/2015, 14h40

Bonjour,

Je suis censé mettre quelque chose dans le HTML ou cela ce fait uniquement dans le javascript ?

le but du jeu est bien de changer la src d'une IMG, il te faut donc bien dans le HTML une balise IMG prête à recevoir cette URL (nom de l'image) retournée par ta fonction.

**NeymarHenry** · 18/04/2015, 17h51

Code html :

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

1
2
3
4
5
6
7
8
9
<body>
	<img src="aaa.png"/>
	<img src="bbb.png"/>
	<img src="ccc.png"/>
	<img src="ddd.png"/>
	<img src="eee.png"/>
	<img src="fff.png"/>
	<img src="ggg.png"/>
</body>

Code :

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

1
2
3
4
5
6
7
8
9
$( function(){ // forme abrégée de $(document).ready(function(){
    var imgArray = [ 'aaa.png', 'bbb.png', 'ccc.png', 'ddd.png', 'eee.png', 'fff.png', 'ggg.png' ];
    function imgRandom(tab){
        return tab[ Math.floor( Math.random() * tab.length ) ];
    }
    for (var i = 0; i < 100; i++ ){
        console.log( i, imgRandom( imgArray));
    }
});

Je suis sur de m'être trompé pour le html , mais j'ai du mal à comprendre , je débute seulement le javascript et le jquery.A l'ouverture de la page , toutes mes images sont affichés. Je ne sais pas comment faire le lien entre ma fonction en javascript et les images en HTML.
Merci de votre patience

**NoSmoking** · 19/04/2015, 09h46

Ton HTML doit avoir une balise IMG de destination

Code html :

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

<img id="random_img" src="" alt="image aléatoire">

et on lui affecte a chargement une URL d'image

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$( function(){ // forme abrégée de $(document).ready(function(){
    var imgArray = [ 'aaa.png', 'bbb.png', 'ccc.png', 'ddd.png', 'eee.png', 'fff.png', 'ggg.png' ];
    function imgRandom(tab){
        return tab[ Math.floor( Math.random() * tab.length ) ];
    }
    // affectation du résultat de la fonction
    $("#random_img").attr('src', imgRandom( imgArray));
 
/*  ceci est à mettre uniquement pour visualiser le résultat de la fonction
    for (var i = 0; i < 100; i++ ){
        console.log( i, imgRandom( imgArray));
    }
*/
});

**NeymarHenry** · 19/04/2015, 13h48

Merci beaucoup de ta réponse, j'ai enfin compris, et le résultat me convient.
Mon but maintenant, dans mon projet, va être d'afficher une image aléatoire et ensuite , au bout d'un certain temps, de changer cette image et d'en afficher une autre.
J'ai pensé a un Setinterval afin d'exécuter la fonction tout les intervalles de temps souhaités, mais ceci n'a pas fonctionné.

**NoSmoking** · 20/04/2015, 19h59

J'ai pensé a un Setinterval afin d'exécuter la fonction tout les intervalles de temps souhaités, mais ceci n'a pas fonctionné.

Il serait peut être bon que tu nous montres comment tu mets en oeuvre ton setInterval.

Tableaux avec images sélectionnées aléatoirement

jQuery

Discussions similaires

Partager

Partager