Ajout de texte sur un diaporama

**Spatah** · 04/02/2020, 14h03

Bonjour à tous,

Je suis débutante en javascript. Grâce à un tuto j'ai créé un diaporama à défilement auto + défilement grâce aux flèches du clavier.
Jusqu'ici tout va bien...

J'aimerais maintenant ajouter du texte sur mes diapos (une légende en bas de la photo).
C'est quelque chose que je sais faire via HTML mais sur ce code, j'ai choisi de créer un objet pour le diaporama et d'ajouter les images via un tableau.
Malgré mes recherches, je n'ai pas trouvé comment faire.

Quelqu'un pourrait m'aider ?

Voici le code :

HTML :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    <div id="slider" class="slider">
      <img src="img/Image_1.jpeg" alt="Photo_Vélo_Ville">
 
      <!--Bouton précédent-->
      <div class="button">
        <button class="prevBtn sliderbtn">
          <i class="fas fa-chevron-left"></i>
        </button>
 
        <!--Bouton play/pause-->
        <button class="pauseBtn sliderbtn">
          <i class="fas fa-pause"></i>
        </button>
 
        <!--Bouton suivaht-->
        <button class="nextBtn sliderbtn">
          <i class="fas fa-chevron-right"></i>
        </button>
      </div>
    </div>

L'objet diapo en JS :

Code :

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

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
// Crée la class Slider
class Slider {
  constructor(sliderId, imgs) {
    this.idSlide = sliderId;
    this.imgs = imgs;
 
    this.slide = document.getElementById(this.idSlide);
    this.img = this.slide.querySelector('img');
    this.prev = this.slide.querySelector('div .prevBtn');
    this.next = this.slide.querySelector('div .nextBtn');
    this.pause = this.slide.querySelector('div .pauseBtn');
 
    this.sliderTimer = null;
 
    this.imgNumber = 0;
 
    // Ecoute les événements (play/pause et flèches du slider + actions via les touches du clavier)
    document.addEventListener('keydown', (event) => this.keyboard(event));
    this.prev.addEventListener('click', () => this.prevImage());
    this.next.addEventListener('click', () => this.nextImage());
    this.pause.addEventListener('click', () => this.playPause());
 
    this.playPause();
  }
 
  // Affiche l'image précédente
  prevImage() {
    this.prev.blur(); // supprime le carré bleu qui reste autour des boutons du slider au clic
    this.imgNumber--;
    if (this.imgNumber < 0) {
      this.imgNumber = this.imgs.length - 1;
    }
    this.img.src = this.imgs[this.imgNumber];
  }
 
  // Affiche l'image suivante
  nextImage() {
    this.next.blur(); // supprime le carré bleu qui reste autour des boutons du slider au clic
    this.imgNumber++;
    if (this.imgNumber > (this.imgs.length - 1)) {
      this.imgNumber = 0;
    }
    this.img.src = this.imgs[this.imgNumber];
  }
 
  // Actions liées aux touches du clavier
  keyboard(e) {
    switch (e.keyCode) {
      case 37: // flèche gauche, image suivante
        this.nextImage();
        break;
      case 39: // flèche droite, image précédente
        this.prevImage();
        break;
      case 80: // touche P, play/pause
        this.playPause();
        break;
    }
  }
 
  // Timer du slider (5 sec) + bouton play/pause et changement d'icône
  playPause() {
    this.pause.blur(); // supprime le carré bleu qui reste autour des boutons du slider au clic
    if (this.sliderTimer) {
      clearInterval(this.sliderTimer);
      this.sliderTimer = null;
      this.pause.className = "playBtn sliderbtn";
      this.pause.innerHTML = '<i class="fas fa-play"></i>'
 
    } else {
      this.sliderTimer = setInterval(this.nextImage.bind(this), 5000);
      this.pause.innerHTML = '<i class="fas fa-pause"></i>'
 
    }
  }
}

Et pour finir, le main JS :

Code :

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

1
2
3
4
5
6
var slide = new Slider(
    'slider',
    ["./img/Image_1.jpeg",
        "./img/Image_2.jpg",
        "./img/Image_3.jpg"]
);

Merci par avance !

Invité · 04/02/2020, 15h29

Bonjour,

le principe est le même.

Le code, légèrement amélioré * :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div id="slider" class="slider">
  <figure>
    <img src="" alt="" />
    <figcaption></figcaption>
  </figure>
 
  <div class="button">
    <button class="prevBtn sliderbtn"></button><!-- précédent-->
    <button class="pauseBtn sliderbtn"></button><!-- play/pause-->
    <button class="nextBtn sliderbtn"></button><!-- suivaht-->
  </div>
</div>

Code JS :

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

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
"use strict";
// Crée la class Slider
class Slider {
  constructor(sliderId, imgs, txts) {
    this.idSlide = sliderId;
    this.imgs = imgs;
    this.txts = txts;
 
    this.slide = document.getElementById(this.idSlide);
    this.img = this.slide.querySelector('img');
    this.txt = this.slide.querySelector('figcaption');
 
    this.prev = this.slide.querySelector('div .prevBtn');
    this.pause = this.slide.querySelector('div .pauseBtn');
    this.next = this.slide.querySelector('div .nextBtn');
 
    this.prev.innerHTML = '<i class="fas fa-chevron-left"></i>'
    this.pause.innerHTML = '<i class="fas fa-pause"></i>'
    this.next.innerHTML = '<i class="fas fa-chevron-right"></i>'
 
    // initialisation image + texte
    this.imgNumber = 0;
    this.img.src = this.imgs[this.imgNumber];
    this.txt.textContent = this.txts[this.imgNumber];
 
    // Ecoute les événements (play/pause et flèches du slider + actions via les touches du clavier)
    document.addEventListener('keydown', (event) => this.keyboard(event));
    this.prev.addEventListener('click', () => this.prevImage());
    this.next.addEventListener('click', () => this.nextImage());
    this.pause.addEventListener('click', () => this.playPause());
 
    this.sliderTimer = null;
    this.playPause();
  }
 
  // Affiche l'image précédente
  prevImage() {
    this.prev.blur(); // supprime le carré bleu qui reste autour des boutons du slider au clic
    this.imgNumber--;
    if (this.imgNumber < 0) {
      this.imgNumber = this.imgs.length - 1;
    }
    this.img.src = this.imgs[this.imgNumber];
    this.txt.textContent = this.txts[this.imgNumber];
  }
 
  // Affiche l'image suivante
  nextImage() {
    this.next.blur(); // supprime le carré bleu qui reste autour des boutons du slider au clic
    this.imgNumber++;
    if (this.imgNumber > (this.imgs.length - 1)) {
      this.imgNumber = 0;
    }
    this.img.src = this.imgs[this.imgNumber];
    this.txt.textContent = this.txts[this.imgNumber];
  }
 
  // Actions liées aux touches du clavier
  keyboard(e) {
    switch (e.keyCode) {
      case 37: // flèche gauche, image suivante
        this.nextImage();
        break;
      case 39: // flèche droite, image précédente
        this.prevImage();
        break;
      case 80: // touche P, play/pause
        this.playPause();
        break;
    }
  }
 
  // Timer du slider (5 sec) + bouton play/pause et changement d'icône
  playPause() {
    this.pause.blur(); // supprime le carré bleu qui reste autour des boutons du slider au clic
    if (this.sliderTimer) {
      clearInterval(this.sliderTimer);
      this.sliderTimer = null;
      this.pause.className = "playBtn sliderbtn";
      this.pause.innerHTML = '<i class="fas fa-play"></i>'
 
    } else {
      this.sliderTimer = setInterval(this.nextImage.bind(this), 5000);
      this.pause.innerHTML = '<i class="fas fa-pause"></i>'
 
    }
  }
}
// --------------
var slide = new Slider(
  'slider',
  ["https://www.f-legrand.fr/scidoc/figures/image/niveaux/images/babouin.png",
   "https://www.nymphomath.ch/info/images/lena.gif",
   "https://i.pinimg.com/originals/b2/d4/6f/b2d46fbb7ed4de9a73f55f5b8cbfc084.png"],
  ["babouin",
   "lena",
   "tigrou"]
);

* En fait, on peut encore améliorer, en générant le contenu HTML du div <div id="slider" class="slider"> via JS (createElement()).

**Spatah** · 04/02/2020, 15h55

Merci beaucoup de ton aide, c'est parfait !

Ajout de texte sur un diaporama

JavaScript

Discussions similaires

Partager

Partager