Bonjour,svp aidez moi javascript

Résolu/Fermé
melvine225 Messages postés 13 Date d'inscription samedi 5 novembre 2022 Statut Membre Dernière intervention 1 janvier 2023 - 29 déc. 2022 à 23:00
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 - 29 déc. 2022 à 23:02

Bonjour,

j'ai pu avancer dans mon programme, j'ai reussi 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>

Windows / Chrome 108.0.0.0

A voir également:

1 réponse

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
29 déc. 2022 à 23:02

Merci de ne pas créer de doublons sur le forum.

Je t'ai répondu dans ta précédente discussion

https://forums.commentcamarche.net/forum/affich-37761607-svp-je-veux-creer-un-diapo-avec-et-j-ai-un-peu-avance#p37761962


0