Créer un diapo avec ">" et "<", j’ai un peu avancé
Résolu
melvine225
Messages postés
13
Date d'inscription
Statut
Membre
Dernière intervention
-
melvine225 Messages postés 13 Date d'inscription Statut Membre Dernière intervention -
melvine225 Messages postés 13 Date d'inscription Statut Membre Dernière intervention -
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
A voir également:
- Créer un diapo avec ">" et "<", j’ai un peu avancé
- Créer un compte google - Guide
- Comment créer un groupe whatsapp - Guide
- Créer un lien pour partager des photos - Guide
- Créer un compte gmail - Guide
- Créer un compte instagram sur google - Guide
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
C'est pareil qu'un if/else
Par exemple, pour la ligne 32
//Si imgToDisplay est plus grand que le nb max (pagi.length), alors on retourne à 1, sinon on affiche l'image demandée. imgToDisplay = imgToDisplay > pagi.length ? 1 : imgToDisplay;
merci encore de me repondre jordane mais ça ne marche pas pour le passage d'une iamge a une autre avec ">et<"
Ca marche très bien....
As-tu bien repris le code HTML que j'ai fourni avec le code JavaScript ?
As-tu pensé à vider le cache de ton navigateur ?
ouiiii ca marche merci jordane
Pense à mettre le sujet en RESOLU.
bonne journée.
jordane j'ai essayé de mettre une condition pour passer de la 8eme image a la premiere quand je clique sur ">" vice versa
j'ai fait if (imageDisplay == 8){
affiche(1)
if (imageDisplay == 1){
affiche(8)
ca