Créer slider en Javascript orienté objet

Invité · 18/02/2019, 18h06

Bonjour,
J'apprends actuellement le Javascript. J'aimerais créer un slider en orienté objet sauf que mon code écrit ne fonctionne pas. Malgré mes longues recherches et en m'aidant des tutoriels, je reste toujours bloqué.

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
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
<!doctype html>
 
<html>
 
<head>
 
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" />
 
    <title>Projet3</title>
 
</head>
 
 
<body>
 
	<img id="slide"></img>
	 <div class="button">
                <a href="#" class="prevBtn"> </a>
                <a href="#" class="pauseBtn"> </a>
                <a href="#" class="nextBtn"> </a>
            </div>
 
    <!--Scripts-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="slider.js"></script> 
 
 
</body>
</html>
 
Javascript : 
var Diaporama= {     
element:document.getElementById('slide'), // Attribut de sélection des images     
imageNum:0,   // Attribut qui permet de parcourir les images    
images:["img1.jpeg","img2.jpeg", "img3.jpeg"],
boucle:null,  
 
   this.idSlide = id;
  	this.imgs = imgs;
  	this.domSlide = document.getElementById(this.idSlide);
    this.domImg = this.domSlide.querySelector('img');
    this.domPrev = this.domSlide.querySelector('div .prevBtn');
    this.domNext  = this.domSlide.querySelector('div .nextBtn');
    this.domPause  = this.domSlide.querySelector('div .pauseBtn');
 
 
// Méthode qui fait fonctionner le diaporama en avant     
suivant: function() {   
	this.imageNum++;  
    if (this.imageNum > (this.images.length - 1)) {
            this.imageNum = 0;
        }
        this.element.src = this.images[this.imageNum];
    },
 
// Méthode qui fait fonctionner le diaporama en arrière   
precedent: function() {     
        this.imageNum--;
        if (this.imageNum < 0) {
            this.imageNum = this.images.length - 1;
        }
        this.element.src = this.images[this.imageNum];
    },
 
//Fonction clavier 
  keyboard: function(e){
        switch(e.keyCode){
            case 37: // left
                this.suivant();
                break;
            case 39: // right
                this.precedent();
                break;
 
        		}
			} 
 
	// Gestionnaires d'événements et Action !
    document.addEventListener('keydown', this.keyboard.bind(this));
    this.domPrev.addEventListener('click', this.precedent.bind(this));
    this.domNext.addEventListener('click', this.suivant.bind(this));
 
 
}
 
var boucle = setInterval(Diaporama.suivant.bind(Diaporama), 2500);

En vous remerciant par avance

**ProgElecT** · 18/02/2019, 19h39

Salut

Je ne suis pas un très bon en JavaScript, mais c'est la première fois que je vois du JavaScript après la balise </html>.
Au minimum, pour avancer place le dernier Javascript de cette façon

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
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
<script>
var Diaporama= {     
element:document.getElementById('slide'), // Attribut de sélection des images     
imageNum:0,   // Attribut qui permet de parcourir les images    
images:["img1.jpeg","img2.jpeg", "img3.jpeg"],
boucle:null,  
 
   this.idSlide = id;
        this.imgs = imgs;
        this.domSlide = document.getElementById(this.idSlide);
    this.domImg = this.domSlide.querySelector('img');
    this.domPrev = this.domSlide.querySelector('div .prevBtn');
    this.domNext  = this.domSlide.querySelector('div .nextBtn');
    this.domPause  = this.domSlide.querySelector('div .pauseBtn');
 
 
// Méthode qui fait fonctionner le diaporama en avant     
suivant: function() {   
        this.imageNum++;  
    if (this.imageNum > (this.images.length - 1)) {
            this.imageNum = 0;
        }
        this.element.src = this.images[this.imageNum];
    },
 
// Méthode qui fait fonctionner le diaporama en arrière   
precedent: function() {     
        this.imageNum--;
        if (this.imageNum < 0) {
            this.imageNum = this.images.length - 1;
        }
        this.element.src = this.images[this.imageNum];
    },
 
//Fonction clavier 
  keyboard: function(e){
        switch(e.keyCode){
            case 37: // left
                this.suivant();
                break;
            case 39: // right
                this.precedent();
                break;
 
                        }
                        } 
 
        // Gestionnaires d'événements et Action !
    document.addEventListener('keydown', this.keyboard.bind(this));
    this.domPrev.addEventListener('click', this.precedent.bind(this));
    this.domNext.addEventListener('click', this.suivant.bind(this));
 
 
}
 
var boucle = setInterval(Diaporama.suivant.bind(Diaporama), 2500);
</script>
</body>
</html>

C'est la première fois que je vois cette façon de déclarer une fonction precedent: function() mais j’apprends encore

.

Créer slider en Javascript orienté objet

JavaScript

Discussions similaires

Partager

Partager