Diaporama JS pur (POO)

Version imprimable

1 pièce(s) jointe(s)

Bonjour à tous et à toutes,

Je créé actuellement un diaporama en Javascript pur orienté objet en suivant les bases d'un tuto (je ne maîtrise pas encore JS).
J'ai un petit souci avec mon code (similaire à celui du tuto qui fonctionne), j'obtiens le message d'erreur suivant dans ma console :
Pièce jointe 463642

Voici le code du slider :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function Diaporama( cible,tableau,repertoire,duree){
 
 this.cible=document.getElementById("diapo");
 this.Tableau=tb;
 this.temp=tps;
 this.repertoir_image="images/";
 this.tbmage=-1;
 
 this.diap();
 
 
 this.diap = function(){
 
   this.tbmage++;
   this.cible.src=this.repertoir_image+this.Tableau[this.tbmage];
   if(this.tbmage==this.Tableau.length-1){
    this.tbmage=-1
   }
   var that=this;
   setTimeout(that.diap, that.temp);
  }
}
 
 
function inimage(){
 
 var tbdiapo=new Array("velo1.png","velo2.png","velo3.png","velo4.jpg");
 
 new Diaporama('diapo',tbdiapo,'images/',900)
 
}
 
typeof window.addEventListener == 'undefined' ? window.attachEvent("onload",inimage) : window.addEventListener("load",inimage, false);

Pour tester le code, voici les balises simples et le css :

Code:

1
2
3
4
5
6
7
8
  <div class="slider">
 
                    <figure slide="slide">
                        <img id="diapo">
                        <figcaption id="legende"></figcaption>
                    </figure>
 
                </div>

Code:

1
2
3
4
5
6
body{
background: black
}
img{
width:12%;
}

Si quelqu'un a un peu de temps pour jeter un œil et m'expliquer les choses, je veux bien :P
Bonne journée :)

03/04/2019, 15h16
SpaceFrog

Le message d'erreur est explicite :

Code:

this.Tableau=tb;

tb ... il sort d'ou ?
03/04/2019, 18h21
Elztx

Oui je vois bien l’erreur dans la console et le fait qu’il sorte de nulle part mais j’essaie de comprendre ce qu’ail peut bien faire là justement... comme j’expliquais je suis un tuto et il y est dans leur code..

Bonjour,

Citation:

comme j’expliquais je suis un tuto et il y est dans leur code

tu dois mal le suivre car il n'y a pas que cela qui ne va pas tps non plus, par exemple, n'est pas défini.

Tu passes des paramètres, (cible,tableau,repertoire,duree) et tu n'en utilises aucun ????

Je pense qu'il faut que tu analyses mieux ce que tu fais car tu devais, semble t-il, plutôt avoir un truc du style
Code:

1 2 3 4 5 6 7 function Diaporama(cible, tableau, repertoire, duree) { this.Image = document.getElementById(cible); this.Tableau = tableau; this.temp = duree; this.repertoir_image = repertoire; this.tbmage = -1; // etc

:salut:

Vous suivez un tutoriel qui a déjà son âge et qui comme souvent chez cette "source" est à prendre avec des réserves (exemple de code non testé) et explications plus ou moins satisfaisantes.

Correction du premier code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const 
    tbdiapo = ['boule1.png', 'boule2.png', 'boule3.png', 'boule4.png', 'boule5.png', 'boule6.png'],
    repertoir_image = 'https://danielhagnoul.developpez.com/images/';
 
let tbindex = 0;
 
function Diaporama() {
    tbindex++;
    document.querySelector('#diapo_1').src = repertoir_image + tbdiapo[tbindex];
 
    if (tbindex == tbdiapo.length - 1) {
        tbindex = -1;
    }
 
    setTimeout(Diaporama, 500);
}
 
Diaporama();

Correction du deuxième code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
const
    tbdiapo1 = ['boule1.png', 'boule2.png', 'boule3.png', 'boule4.png', 'boule5.png', 'boule6.png'],
    tbdiapo2 = ['boule7.png', 'boule8.png'],
    tbdiapo3 = ['boule5.png', 'boule3.png', 'boule1.png', 'boule2.png'],
    repertoir_image = 'https://danielhagnoul.developpez.com/images/';
 
class Diaporama {
    constructor(cible, tableau, repertoire, duree) {
        this.Image = document.querySelector('#' + cible);
        this.Tableau = tableau;
        this.temp = duree;
        this.repertoir_image = repertoire;
        this.tbmage = -1;
        this.diap();
    }
    diap() {
        this.tbmage++;
        this.Image.src = this.repertoir_image + this.Tableau[this.tbmage];
 
        if (this.tbmage === this.Tableau.length - 1) {
            this.tbmage = -1;
        }
 
        let that = this;
 
        setTimeout(() => {
            that.diap()
        }, this.temp);
    }
}
 
new Diaporama('diapo_1', tbdiapo1, repertoir_image, 2000);
new Diaporama('diapo_2', tbdiapo2, repertoir_image, 1000);
new Diaporama('diapo_3', tbdiapo3, repertoir_image, 3000);

Les codes suivants ne sont qu'un ajout inutile, à mon sens.

04/04/2019, 12h13
Elztx
Hello,
Merci pour vos réponses.
Ce tuto me semblait plutôt bien détaillé mais je conçois qu'il puisse être obsolète.

( En fait pour détailler, je vais devoir faire deux tableaux, un avec les images, un autre avec les légendes qui sont donc superposés et qui défilent au même rythme.
On m'impose d'utiliser des classes et qu'il soit en POO. )

Merci pour ta correction @danielhagnoul !

Je ne comprends pas le principe d'inclure par exemple :
Code:

1 2 3 this.Tableau = tableau; this.temp = duree; this.repertoir_image = repertoire;
Alors qu'on ne fait pas référence à duree ou repertoire etc après.

Citation:

Alors qu'on ne fait pas référence à duree ou repertoire etc après.

sauf qu'au départ

Code:

1
2
3
4
5
6
7
function Diaporama(cible, tableau, repertoire, duree) {
    this.Image = document.getElementById(cible);
    this.Tableau = tableau;
    this.temp = duree;
    this.repertoir_image = repertoire;
    this.tbmage = -1;
    // etc

tu initialises des propriétés de l'objet Diaporama avec et que, plus loin, tu utilises ces propriétés dans ce bout de code par exemple

Code:

1
2
3
4
5
6
7
8
9
this.diap = function() {
    this.tbmage++;
    this.cible.src = this.repertoir_image + this.Tableau[this.tbmage];
    if (this.tbmage == this.Tableau.length - 1) {
        this.tbmage = -1
    }
    var that = this;
    setTimeout(that.diap, that.temp);
}

05/04/2019, 14h17
Elztx

D'accord merci, c'est un peu plus clair pour moi ! Je comprends de mieux en mieux !
J'ai fait une seconde méthode pour aller arrière, j'ai réussi à ajouter le contrôle au clavier, je vais essayer d'ajouter des boutons maintenant.

Merci à tous pour vos réponses !
Je peux garder ce sujet ouvert ou c'est mieux d'en créer des nouveaux pour mes futures difficultés sur mon diaporama ?
05/04/2019, 14h34
NoSmoking

Citation:

~~Je peux garder ce sujet ouvert ou~~ c'est mieux d'en créer des nouveaux pour mes futures difficultés sur mon diaporama ?

c'est mieux !
08/04/2019, 14h17
Elztx

Hello,

C'est noté, merci !
Je passe le sujet en résolu du coup ;)

Bonne journée :D