Créer un diapo avec ">" et "<", j’ai un peu avancé
Résolu
melvine225
Messages postés
13
Statut
Membre
-
melvine225 Messages postés 13 Statut Membre -
melvine225 Messages postés 13 Statut Membre -
Bonjour,
grace a jordane j'ai pu avancer dans mon programme, j'ai reussi aussi a faire defiler les images avec un evenement click sur les numeros de 1 a 8 dans la balise span.
je veux aussi que quand je clique sur le ">"je puisse avancer d'une image et "<" pour reculer.
voici mon JS et MON html
-----MON FICHIER JS------
//diaporama.js
function affiche(n) {
var imgs = document.querySelectorAll("img");
imgs.forEach(function(el) {
el.style.display = "none";
});
document.getElementById("img"+n).style.display = "block";
}
affiche(1);
pagination.addEventListener("click", (e) => {
if (e.target.textContent == "2") {
affiche(2)
}
});
pagination.addEventListener("click", (e) => {
if (e.target.textContent == "1") {
affiche(1)
}
});
pagination.addEventListener("click", (e) => {
if (e.target.textContent == "3") {
affiche(3)
}
});
pagination.addEventListener("click", (e) => {
if (e.target.textContent == "2") {
affiche(2)
}
});
pagination.addEventListener("click", (e) => {
if (e.target.textContent == "4") {
affiche(4)
}
});
pagination.addEventListener("click", (e) => {
if (e.target.textContent == "5") {
affiche(5)
}
});
pagination.addEventListener("click", (e) => {
if (e.target.textContent == "6") {
affiche(6)
}
});
pagination.addEventListener("click", (e) => {
if (e.target.textContent == "7") {
affiche(7)
}
});
pagination.addEventListener("click", (e) => {
if (e.target.textContent == "8") {
affiche(8)
}
});
-------MON FICHIER HTML-------
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title> Diaporama </title>
<!-- Lien vers le Javascript -->
<script src="diaporama.js" charset="utf-8" defer="defer"></script>
</head>
<body>
<!-- Chargement des images du diaporama -->
<div id="diapo">
<img id='img1' src='images_diaporama/img1.jpg'>
<img id='img2' src='images_diaporama/img2.jpg'>
<img id='img3' src='images_diaporama/img3.jpg'>
<img id='img4' src='images_diaporama/img4.jpg'>
<img id='img5' src='images_diaporama/img5.jpg'>
<img id='img6' src='images_diaporama/img6.jpg'>
<img id='img7' src='images_diaporama/img7.jpg'>
<img id='img8' src='images_diaporama/img8.jpg'>
</div>
<!-- Pagination pour faire défiler les images -->
<div id="pagination">
<span><</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>></span>
</div>
</body>
</html>
Windows / Chrome 108.0.0.0
2 réponses
-
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title> Diaporama </title> <!-- Lien vers le Javascript --> <script src="diaporama.js" charset="utf-8" defer="defer"></script> <style> img{ display:none; } .pagi, #prev, #next{ cursor:pointer; min-width:8px; min-height:height:10px; margin-left:2px; background-color:grey; } .pagi:hover , #prev:hover, #next:hover{ background-color:white; } </style> </head> <body> <!-- Chargement des images du diaporama --> <div id="diapo"> <img id='img1' src='images_diaporama/img1.jpg' alt="img1"> <img id='img2' src='images_diaporama/img2.jpg' alt="img2"> <img id='img3' src='images_diaporama/img3.jpg' alt="img3"> <img id='img4' src='images_diaporama/img4.jpg' alt="img4"> <img id='img5' src='images_diaporama/img5.jpg' alt="img5"> <img id='img6' src='images_diaporama/img6.jpg' alt="img6"> <img id='img7' src='images_diaporama/img7.jpg' alt="img7"> <img id='img8' src='images_diaporama/img8.jpg' alt="img8"> </div> <!-- Pagination pour faire défiler les images --> <div id="pagination"> <span id="prev"><</span> <span class="pagi" data-img="1">1</span> <span class="pagi" data-img="2">2</span> <span class="pagi" data-img="3">3</span> <span class="pagi" data-img="4">4</span> <span class="pagi" data-img="5">5</span> <span class="pagi" data-img="5">6</span> <span class="pagi" data-img="7">7</span> <span class="pagi" data-img="8">8</span> <span id="next">></span> </div> </body> </html>//diaporama.js var currentImg = 1; function affiche(n) { console.log("Affichage de l'image",n); currentImg = n; var imgs = document.querySelectorAll("img"); imgs.forEach(function(el) { el.style.display = "none"; }); document.getElementById("img"+n).style.display = "block"; } var pagi = document.querySelectorAll('.pagi'); pagi.forEach(function(el) { el.addEventListener('click',function(){ let imgToDisplay = el.dataset.img; affiche(imgToDisplay); }); }); var prev = document.querySelector("#prev"); prev.addEventListener('click',function(){ let imgToDisplay = currentImg - 1 ; imgToDisplay = imgToDisplay <= 1 ? 1 : imgToDisplay; affiche(imgToDisplay); }); var next = document.querySelector("#next"); next.addEventListener('click',function(){ let imgToDisplay = currentImg + 1 ; imgToDisplay = imgToDisplay >= pagi.length ? pagi.length : imgToDisplay; affiche(imgToDisplay); });
-
Pas besoin
Dans le code que je t'ai donné, il suffit de modifier le TERNAIRE aux lignes 25 et 32
