Tableau d'images JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. Tableau d'images JavaScript
Mehvish Ashiq 12 octobre 2023
JavaScript JavaScript Array JavaScript Image
  1. Utiliser des objets de tableau pour afficher un tableau d’images en JavaScript
  2. Utiliser des tableaux pour afficher un tableau d’images en JavaScript
Tableau d'images JavaScript

Ce didacticiel vous informe sur le tableau JavaScript de création et d’itération d’images ; il illustre l’utilisation de JavaScript Arrays et Array Objects. Chaque exemple a un code de démarrage et une sortie respective pour s’entraîner.

Utiliser des objets de tableau pour afficher un tableau d’images en JavaScript

Code HTML:

<!DOCTYPE html>
<html>
<head>
    <script src="./javascript/imageArray.js"></script>
    <link rel="stylesheet" href="./css/styles.css">
    <title>Image Iteration</title>
</head>
<body>
    <h1>Click to see the next image</h1>
    <div id="splash">
        <img src="./images/splash class room image.jpg" alt="classroom image" id="mainImage">
    </div> 
    <div id="controls">
        <button id="previousbtn" onclick="previousImage()">Previous Image</button>
        <button id="nextbtn" onclick="nextImage()"> Next Image</button>
    </div>
</body>
</html>

Code CSS :

img{
    width: 350px;
    height: 350px;
}
#previousbtn{
    margin-right: 75px;;
}
#nextbtn{
    margin-left: 75px;
}

Code JavaScript :

var imgArray = new Array();

imgArray[0] = new Image();
imgArray[0].src = './images/splash class room image.jpg';

imgArray[1] = new Image();
imgArray[1].src = './images/splash animal image.jpg';

imgArray[2] = new Image();
imgArray[2].src = './images/splash nature image.jpg';

imgArray[3] = new Image();
imgArray[3].src = './images/splash food image.jpg';

imgArray[4] = new Image();
imgArray[4].src = './images/splash travel image.jpg';

function nextImage() {
  var img = document.getElementById('mainImage');
  for (var i = 0; i < imgArray.length; i++) {
    if (imgArray[i].src == img.src) {
      if (i === imgArray.length) {
        document.getElementById('mainImage').src = imgArray[0].src;
        break;
      }
      document.getElementById('mainImage').src = imgArray[i + 1].src;
      break;
    }
  }
}
function previousImage() {
  var img = document.getElementById('mainImage');
  for (var i = imgArray.length - 1; i >= 0; i--) {
    if (imgArray[i].src == img.src) {
      if (i === imgArray.length) {
        document.getElementById('mainImage').src = imgArray[4].src;
        break;
      }
      document.getElementById('mainImage').src = imgArray[i - 1].src;
      break;
    }
  }
}

Production :

tableau d&rsquo;images javascript - itération d&rsquo;image à l&rsquo;aide d&rsquo;un objet

Dans ce code, chaque élément img est un objet image. Le src est également défini en affectant une chaîne qui fait référence au nom de fichier ayant cette image particulière.

La fonction nextImage récupère le premier élément ayant pour identifiant mainImage puis itère sur les dernières images. La fonction previousImage récupère également le premier élément ayant l’id mainImage (tout comme la méthode nextImage) mais boucle de l’image actuelle vers l’arrière.

Utiliser des tableaux pour afficher un tableau d’images en JavaScript

Code HTML:

<!DOCTYPE html>
<html>
<head>
    <script src="./javascript/imageArray.js"></script>
    <link rel="stylesheet" href="./css/styles.css">
    <title>Image Iteration</title>
</head>
<body onload="makeImage();">
    <div class="contents" id="content"></div>
    <button onclick="nextImage()">Next Image</button>
</body>
</html>

Code CSS :

img{
    width: 350px;
    height: 350px;
}

Code JavaScript :

var images = [
  './images/splash class room image.jpg', './images/splash animal image.jpg',
  './images/splash nature image.jpg', './images/splash food image.jpg',
  './images/splash travel image.jpg'
];
var index = 0;

function makeImage() {
  var img = document.createElement('img')
  img.src = images[index];
  document.getElementById('content').appendChild(img);
}

function nextImage() {
  var img = document.getElementById('content').getElementsByTagName('img')[0]
  index++;
  index = index % images.length;
  img.src = images[index];
}

Production :

tableau d&rsquo;images javascript - itération d&rsquo;image à l&rsquo;aide d&rsquo;un tableau

La fonction makeImage construit les balises img et spécifie leur attribut src. Cette fonction est appelée immédiatement après le chargement de la page à l’aide de l’événement onload dans la balise <body>. Le createElement crée l’élément HTML (nous créons un élément img pour cet exemple).

Ensuite, il spécifie le img.src pour obtenir l’image. La fonction appendChild ajoute l’élément img dans l’élément dont l’id est content.

En termes simples, la fonction makeImage crée des balises img dans la balise dont la valeur d’id est content.

La première ligne de code de la fonction nextImage récupère la première balise img de l’élément dont l’id est content. Le index = index % images.length; vous amène à la première image si vous avez la dernière image dans la sortie.

Vous voyez les images car cette fonction définit également l’attribut src.

Auteur: Mehvish Ashiq
Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

Article connexe - JavaScript Array

Article connexe - JavaScript Image