Créer un diapo avec ">" et "<", j’ai un peu avancé

Résolu/Fermé

melvine225 Messages postés 13 Date d'inscription samedi 5 novembre 2022 Statut Membre Dernière intervention 1 janvier 2023 - Modifié le 29 déc. 2022 à 16:28
melvine225 Messages postés 13 Date d'inscription samedi 5 novembre 2022 Statut Membre Dernière intervention 1 janvier 2023 - 1 janv. 2023 à 19:03

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 gmail - Guide
Créer un compte google - Guide
Créer un groupe whatsapp - Guide
Créer un compte instagram - Guide
Créer un organigramme - Guide

2 réponses

Réponse 1 / 2

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
29 déc. 2022 à 22:48

<!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);
});

melvine225 Messages postés 13 Date d'inscription samedi 5 novembre 2022 Statut Membre Dernière intervention 1 janvier 2023 1
Modifié le 30 déc. 2022 à 00:07

merci encore de me repondre jordane mais ça ne marche pas pour le passage d'une iamge a une autre avec ">et<"

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650 > melvine225 Messages postés 13 Date d'inscription samedi 5 novembre 2022 Statut Membre Dernière intervention 1 janvier 2023
30 déc. 2022 à 00:06

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 ?

melvine225 Messages postés 13 Date d'inscription samedi 5 novembre 2022 Statut Membre Dernière intervention 1 janvier 2023 1 > jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024
30 déc. 2022 à 13:59

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)

Réponse 2 / 2

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
31 déc. 2022 à 19:30

Pas besoin
Dans le code que je t'ai donné, il suffit de modifier le TERNAIRE aux lignes 25 et 32

melvine225 Messages postés 13 Date d'inscription samedi 5 novembre 2022 Statut Membre Dernière intervention 1 janvier 2023 1
31 déc. 2022 à 20:02

comment faire stp, je ne maitrises pas cette syntaxe c'est pourquoi j'ai utilisé la condition mais ca ne marche pas correctement

merci

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;

je tenais à vraiment te dire merci. je debute dans ce language et grace à toi j'ai appris tellement merci, merci, merci infiniment jordane

Discussions similaires

créer une adresse gmail pour une autre personne

Discussions similaires

Newsletters