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
| const
tabDiapo = ['velo1.png', 'velo2.png', 'velo3.png', 'velo4.jpg'],
tabTexte = ['txt1', 'txt2', 'txt3', 'txt4'],
repertoir_image = 'images/';
class Diaporama {
constructor(tableau1, tableau2, repertoire, idImage, idTexte) {
this.tableauImg = tableau1;
this.tableauTxt = tableau2;
this.idImg = idImage;
this.idTxt = idTexte;
this.repertoir_image = repertoire;
this.tbmage = 0;
}
avancer() {
this.tbmage++;
if (this.tbmage > (this.tableauImg.length) - 1) {
this.tbmage = 0;
}
document.getElementById(this.idImg).src = this.repertoir_image + this.tableauImg[this.tbmage];
document.getElementById(this.idTxt).textContent = tabTexte[this.tbmage];
}
reculer() {
this.tbmage--;
if (this.tbmage < 0) {
this.tbmage = (this.tableauImg.length) - 1
}
document.getElementById(this.idImg).src = this.repertoir_image + this.tableauImg[this.tbmage];
document.getElementById(this.idTxt).textContent = tabTexte[this.tbmage];
}
}
monDiaporama= new Diaporama(tabDiapo, tabTexte, repertoir_image, 'diapo', 'legende');
monDiaporama.intervalId = setInterval("monDiaporama.avancer()", 5000);
//Clavier
document.addEventListener("keydown", function(e){
if(e.keyCode === 37){
monDiaporama.reculer();
clearInterval(monDiaporama.intervalId);
monDiaporama.intervalId = setInterval("monDiaporama.avancer()", 5000);
}
else if(e.keyCode === 39){
monDiaporama.avancer();
clearInterval(monDiaporama.intervalId);
monDiaporama.intervalId = setInterval("monDiaporama.avancer()", 5000);
}
});
// Le bouton droit appelle la méthode "avancer" du diaporama
document.getElementById("fleche_d").addEventListener("click", monDiaporama.avancer());
// Le bouton gauche appelle la méthode "reculer" du diaporama
document.getElementById("fleche_g").addEventListener("click", monDiaporama.reculer()); |
