Orienté objet

Par staf, il y a 6 ans

Bonjour,

Voila je rencontre un petit problème avec mon code. Ce dernier me permet de créer un diaporama automatique, mais, il me le faut en orienté objet il parait???? voici le code:

Ce que je fais

Décrivez ici votre code ou ce que vous cherchez à faire

var slides = document.querySelectorAll('.slide'); var buttRight = document.querySelector('.butt-suivant'); var buttLeft = document.querySelector('.butt-precedent'); var buttPause = document.querySelector('.butt-pause'); var index = 0; function slideSuivant(){ slides[index].classList.remove('slide-active'); if(index === 3){ index = -1; } slides[index+1].classList.add('slide-active'); index = index + 1; }; //slide suivant au click buttRight.addEventListener('click', function(){ slides[index].classList.remove('slide-active'); if(index === 3){ index = -1; } slides[index+1].classList.add('slide-active'); index = index + 1; }); //slide précédent au click buttLeft.addEventListener('click', function(){ slides[index].classList.remove('slide-active'); if(index === 0){ index = 3; } slides[index-1].classList.add('slide-active'); index = index-1; }); //slide auto var idInterval = window.setInterval(function(){ slideSuivant(); },2000);//Défilement des images toutes les 2 secondes //stop du slide auto buttPause.addEventListener('click', function(){ if (buttPause.classList.contains('enpause')) {//en pause->il relance le timer window.clearInterval(idInterval); idInterval = window.setInterval(function(){ slideSuivant(); },2000); buttPause.classList.remove('enpause'); }else{//n'est pas en pause->il met en pause window.clearInterval(idInterval); buttPause.classList.add('enpause'); } });

Ce que je veux

Mon but c'est de mettre mon code en orienté objet. Alors là, gros souci et en plus, il me faut pouvoir défiler mes sliders avec les flêches du clavier de l'ordinateur. Si quelqu'un m'a compris, je suis novice et ça me prend la tête. Voilà

Ce que j'obtiens

Décrivez ici vos erreurs ou ce que vous obtenez à la place de ce que vous attendez :(

3 réponses

Balsakup,

il y a 6 ans

Salut,

Voilà à quoi ça pourrait ressembler de passer ton slider en JS POO.

function Slider(slidesContainer) { this.slidesContainer = slidesContainer; this.current = 0; } Slider.prototype.next = function () { var children = this.slidesContainer.children; children[this.current].classList.remove('active'); children[++this.current % children.length].classList.add('active'); }; Slider.prototype.previous = function () { var children = this.slidesContainer.children; children[this.current].classList.remove('active'); children[--this.current % children.length].classList.add('active'); }; var nextBtn = document.getElementById('next'); var previousBtn = document.getElementById('previous'); var slider = new Slider(document.getElementById('slides')); nextBtn.addEventListener('click', slider.next.bind(slider), false); previousBtn.addEventListener('click', slider.previous.bind(slider), false); window.addEventListener('keydown', function (event) { switch (event.key) { case 'ArrowRight': slider.next(); break; case 'ArrowLeft': slider.previous(); break; } }, false);

staf,

il y a 6 ans

Bonjour, Balsakup,
Merci d'avoir pris de ton temps. Pas encore testé, mais cela me semble claire. je te ferai un retour.
Merci encore une fois

Balsakup,

il y a 6 ans

@staf, je n'ai pas testé non plus, le but étant de ne pas te donner la solution, mais un aperçu de la solution.
A toi de l'adapter pour que ça fonctionne pour ton cas ;)