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

Créer slider en Javascript orienté objet

JavaScript

Mode arborescent

Discussions similaires

Partager

Partager