Chargement aléatoire d'un tableau à l'exécution d'un script

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Chargement aléatoire d'un tableau à l'exécution d'un script

Message par Neptunia le Sam 21 Fév 2015 - 16:23

Détails techniques


Version du forum : Indépendant de la version de forum
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Indépendant du navigateur
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Sans objet
Lien du forum : http://www.planet-series.com/

Description du problème

Bonjour ^^


J'ai actuellement sur le forum de mon profil, un scroll horizontal continu construit à partir de ce script :
Right Continuous image marquee

Il fonctionne si bien que j'ai décidé de l'améliorer en y ajoutant une touche de hasard.

Voici le contenu actuel du script :
Code:
var mqAry1=['http://www.patmax.eu/P132/Sliders/24.heures.chrono320-180.jpg','http://www.patmax.eu/P132/Sliders/arrow320-180.jpg','http://www.patmax.eu/P132/Sliders/beauty.and.the.beast320-180.jpg','http://www.patmax.eu/P132/Sliders/bones320-180.jpg','http://www.patmax.eu/P132/Sliders/brooklyn.nine.nine320-180.jpg','http://www.patmax.eu/P132/Sliders/downton.abbey320-180-1.jpg','http://www.patmax.eu/P132/Sliders/esprits.criminels320-180-1.jpg','http://www.patmax.eu/P132/Sliders/fbi.duo.tres.special320-180-1.jpg','http://www.patmax.eu/P132/Sliders/glee320-180.jpg','http://www.patmax.eu/P132/Sliders/gotham320-180.jpg','http://www.patmax.eu/P132/Sliders/greys.anatomy320-180-1.jpg','http://www.patmax.eu/P132/Sliders/grimm320-180-1.jpg','http://www.patmax.eu/P132/Sliders/hart.of.dixie320-180.jpg','http://www.patmax.eu/P132/Sliders/new.girl320-180.jpg','http://www.patmax.eu/P132/Sliders/nicolas.le.floch320-180.jpg','http://www.patmax.eu/P132/Sliders/once.upon.a.time320-180-1.jpg','http://www.patmax.eu/P132/Sliders/sleepy.hollow320-180.jpg','http://www.patmax.eu/P132/Sliders/supernatural320-180.jpg','http://www.patmax.eu/P132/Sliders/the.walking.dead320-180-1.jpg','http://www.patmax.eu/P132/Sliders/vampire.diaries320-180-1.jpg','http://www.patmax.eu/P132/Sliders/vikings320-180-1.jpg'];


function start() {
  new mq('Nep_Hscroll1',mqAry1,320);
  mqRotate(mqr); // must come last
}
window.onload = start;

// Continuous Image Marquee
// copyright 24th July 2008 by Stephen Chapman
// http://javascript.about.com
// permission to use this Javascript on your web page is granted
// provided that all of the code below in this script (including these
// comments) is used without any alteration
var mqr = []; function mq(id,ary,wid){this.mqo=document.getElementById(id); var heit = this.mqo.style.height; this.mqo.onmouseout=function() {mqRotate(mqr);}; this.mqo.onmouseover=function() {clearTimeout(mqr[0].TO);}; this.mqo.ary=[]; var maxw = ary.length; for (var i=0;i<maxw;i++){this.mqo.ary[i]=document.createElement('img'); this.mqo.ary[i].src=ary[i]; this.mqo.ary[i].style.position = 'absolute'; this.mqo.ary[i].style.left = (wid*i)+'px'; this.mqo.ary[i].style.width = wid+'px'; this.mqo.ary[i].style.height = heit; this.mqo.appendChild(this.mqo.ary[i]);} mqr.push(this.mqo);} function mqRotate(mqr){if (!mqr) return; for (var j=mqr.length - 1; j > -1; j--) {maxa = mqr[j].ary.length; for (var i=0;i<maxa;i++){var x = mqr[j].ary[i].style;  x.left=(parseInt(x.left,10)-1)+'px';} var y = mqr[j].ary[0].style; if (parseInt(y.left,10)+parseInt(y.width,10)<0) {var z = mqr[j].ary.shift(); z.style.left = (parseInt(z.style.left) + parseInt(z.style.width)*maxa) + 'px'; mqr[j].ary.push(z);}} mqr[0].TO=setTimeout('mqRotate(mqr)',10);}
Un tableau contenant 21 images de même largeur, que j'appelle par l'instruction suivante :
function start() {
new mq('Nep_Hscroll1',mqAry1,320);
mqRotate(mqr); // must come last
}
Le passage en gras correspondant au nom de mon unique tableau, l'identifiant qui précède = le nom du conteneur, le nombre qui suit = la largeur de chaque image

Je souhaiterais désormais créer plusieurs tableaux plus petits et en charger un aléatoirement à chaque chargement de la page.

J'ai donc complété mon script avec un deuxième tableau avec quelques images pour commencer ainsi qu'un troisième tableau contenant le nom de mes 2 tableaux images.

Le nouveau script, bogué !
Code:

var choices=['mqAry1','mq_US_AMC_1'];

var choice = choices[Math.floor(Math.random()*choices.length)];

var mqAry1=['http://www.patmax.eu/P132/Sliders/24.heures.chrono320-180.jpg','http://www.patmax.eu/P132/Sliders/arrow320-180.jpg','http://www.patmax.eu/P132/Sliders/beauty.and.the.beast320-180.jpg','http://www.patmax.eu/P132/Sliders/bones320-180.jpg','http://www.patmax.eu/P132/Sliders/brooklyn.nine.nine320-180.jpg','http://www.patmax.eu/P132/Sliders/downton.abbey320-180-1.jpg','http://www.patmax.eu/P132/Sliders/esprits.criminels320-180-1.jpg','http://www.patmax.eu/P132/Sliders/fbi.duo.tres.special320-180-1.jpg','http://www.patmax.eu/P132/Sliders/glee320-180.jpg','http://www.patmax.eu/P132/Sliders/gotham320-180.jpg','http://www.patmax.eu/P132/Sliders/greys.anatomy320-180-1.jpg','http://www.patmax.eu/P132/Sliders/grimm320-180-1.jpg','http://www.patmax.eu/P132/Sliders/hart.of.dixie320-180.jpg','http://www.patmax.eu/P132/Sliders/new.girl320-180.jpg','http://www.patmax.eu/P132/Sliders/nicolas.le.floch320-180.jpg','http://www.patmax.eu/P132/Sliders/once.upon.a.time320-180-1.jpg','http://www.patmax.eu/P132/Sliders/sleepy.hollow320-180.jpg','http://www.patmax.eu/P132/Sliders/supernatural320-180.jpg','http://www.patmax.eu/P132/Sliders/the.walking.dead320-180-1.jpg','http://www.patmax.eu/P132/Sliders/vampire.diaries320-180-1.jpg','http://www.patmax.eu/P132/Sliders/vikings320-180-1.jpg'];

var mq_US_AMC_1=['http://www.patmax.eu/P132/Sliders/US.AMC-Better.Call.Saul-320-180.jpg','http://www.patmax.eu/P132/Sliders/US.AMC-Halt.And.Catch.Fire-320-180.jpg','http://www.patmax.eu/P132/Sliders/US.AMC-Hell.On.Wheels-320-180.jpg','http://www.patmax.eu/P132/Sliders/US.AMC-Mad.Men-320-180.jpg','http://www.patmax.eu/P132/Sliders/US.AMC-The.Walking.Dead-320-180.jpg','http://www.patmax.eu/P132/Sliders/US.AMC-Turn-320-180.jpg'];


function start() {
  new mq('Nep_Hscroll1',choice,320);
  mqRotate(mqr); // must come last
}
window.onload = start;

// Continuous Image Marquee
// Je ne met pas la fin (identique au premier)

Au lieu de charger l'un des deux tableaux, je me retrouve à charger en guise d'image les lettres constituant le nom du tableau.

J'ai essayé :
- avec ou sans ', ".
- En plaçant les commandes Math() dans la définition de la variable ou à l'intérieur de la fonction start()

Je suppose qu'il s'agit d'une bête erreur de syntaxe soit dans la définition du tableau de tableaux, soit dans l'execution de la fonction start() mais je patauge depuis plusieurs heures.


Dernière édition par Neptune- le Sam 21 Fév 2015 - 20:06, édité 1 fois

Neptunia
+ Hyperactif +

Féminin
Messages : 10983
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Chargement aléatoire d'un tableau à l'exécution d'un script

Message par [Nihil] le Sam 21 Fév 2015 - 19:48

Hello Neptune-

Actuellement, cette ligne là var choice = choices[Math.floor(Math.random()*choices.length)]; va te retourner soit la chaine de cratère "mqAry1" soit "mq_US_AMC_1" et c'est tout :/

Ça sera comme si tu avais écrit
Code:
new mq('Nep_Hscroll1',"mqAry1",320);

Ou bien
Code:
new mq('Nep_Hscroll1',"mq_US_AMC_1",320);

Tu ne peux pas appeler une variable directement comme ça par son nom.

Voici comment tu pourrais faire par exemple :
Code:
/* On déclare choices*/
var choices= [];
 
/* On rajoute un premier tableau à choices*/
choices.push(['http://www.patmax.eu/P132/Sliders/24.heures.chrono320-180.jpg','http://www.patmax.eu/P132/Sliders/arrow320-180.jpg','http://www.patmax.eu/P132/Sliders/beauty.and.the.beast320-180.jpg','http://www.patmax.eu/P132/Sliders/bones320-180.jpg','http://www.patmax.eu/P132/Sliders/brooklyn.nine.nine320-180.jpg','http://www.patmax.eu/P132/Sliders/downton.abbey320-180-1.jpg','http://www.patmax.eu/P132/Sliders/esprits.criminels320-180-1.jpg','http://www.patmax.eu/P132/Sliders/fbi.duo.tres.special320-180-1.jpg','http://www.patmax.eu/P132/Sliders/glee320-180.jpg','http://www.patmax.eu/P132/Sliders/gotham320-180.jpg','http://www.patmax.eu/P132/Sliders/greys.anatomy320-180-1.jpg','http://www.patmax.eu/P132/Sliders/grimm320-180-1.jpg','http://www.patmax.eu/P132/Sliders/hart.of.dixie320-180.jpg','http://www.patmax.eu/P132/Sliders/new.girl320-180.jpg','http://www.patmax.eu/P132/Sliders/nicolas.le.floch320-180.jpg','http://www.patmax.eu/P132/Sliders/once.upon.a.time320-180-1.jpg','http://www.patmax.eu/P132/Sliders/sleepy.hollow320-180.jpg','http://www.patmax.eu/P132/Sliders/supernatural320-180.jpg','http://www.patmax.eu/P132/Sliders/the.walking.dead320-180-1.jpg','http://www.patmax.eu/P132/Sliders/vampire.diaries320-180-1.jpg','http://www.patmax.eu/P132/Sliders/vikings320-180-1.jpg']);
 
/* On rajoute un second tableau à choices */
choices.push(['http://www.patmax.eu/P132/Sliders/US.AMC-Better.Call.Saul-320-180.jpg','http://www.patmax.eu/P132/Sliders/US.AMC-Halt.And.Catch.Fire-320-180.jpg','http://www.patmax.eu/P132/Sliders/US.AMC-Hell.On.Wheels-320-180.jpg','http://www.patmax.eu/P132/Sliders/US.AMC-Mad.Men-320-180.jpg','http://www.patmax.eu/P132/Sliders/US.AMC-The.Walking.Dead-320-180.jpg','http://www.patmax.eu/P132/Sliders/US.AMC-Turn-320-180.jpg']);
 
/* On choisi au hasard l'un des tableaux */
var choice = choices[Math.floor(Math.random()*choices.length)];
 
function start() {
  new mq('Nep_Hscroll1',choice,320);
  mqRotate(mqr); // must come last
}
window.onload = start;
 
// Continuous Image Marquee
// Je ne met pas la fin (identique au premier)

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Chargement aléatoire d'un tableau à l'exécution d'un script

Message par Neptunia le Sam 21 Fév 2015 - 20:05

Impeccable, ça marche à la perfection alien

Plus qu'à confectionner tous mes tableaux supplémentaires Pc

Merci beaucoup [Nihil] ::fete::

Neptunia
+ Hyperactif +

Féminin
Messages : 10983
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum