JavaScript Array von Bildern

Mehvish Ashiq 12 Oktober 2023 JavaScript JavaScript Array JavaScript Image
  1. Verwenden Sie Array-Objekte, um ein Array von Bildern in JavaScript anzuzeigen
  2. Verwenden Sie Arrays, um ein Array von Bildern in JavaScript anzuzeigen
JavaScript Array von Bildern

Dieses Tutorial erklärt Ihnen die Erstellung und Iteration des JavaScript-Arrays von Bildern; es veranschaulicht die Verwendung von JavaScript Arrays und Array Objects. Jedes Beispiel hat einen Startcode und eine entsprechende Ausgabe zum Üben.

Verwenden Sie Array-Objekte, um ein Array von Bildern in JavaScript anzuzeigen

HTML Quelltext:

<!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>

CSS-Code:

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

JavaScript-Code:

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

Ausgabe:

Javascript-Array von Bildern - Bilditeration mit Objekt

In diesem Code ist jedes img-Element ein Bildobjekt. Der src wird ebenfalls definiert, indem ein String zugewiesen wird, der auf den Dateinamen mit diesem bestimmten Bild verweist.

Die Funktion nextImage holt das erste Element mit der ID mainImage und iteriert dann über die letzten Bilder. Die Funktion vorherigesBild ruft auch das erste Element mit der ID mainImage ab (genau wie die Methode nextImage), springt aber vom aktuellen Bild zurück nach hinten.

Verwenden Sie Arrays, um ein Array von Bildern in JavaScript anzuzeigen

HTML Quelltext:

<!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>

CSS-Code:

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

JavaScript-Code:

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];
}

Ausgabe:

Javascript-Array von Bildern - Bilditeration mit Array

Die Funktion makeImage konstruiert die img-Tags und spezifiziert deren src-Attribut. Diese Funktion wird unmittelbar nach dem Laden der Seite mit dem onload-Event im <body>-Tag aufgerufen. Das createElement erstellt das HTML-Element (wir erstellen für dieses Beispiel ein img-Element).

Dann gibt es die img.src an, um das Bild zu erhalten. Die Funktion appendChild hängt das Element img an das Element an, dessen ID content ist.

In einfachen Worten, die Funktion makeImage erstellt img-Tags innerhalb des Tags, dessen ID-Wert content ist.

Die erste Codezeile in der Funktion nextImage erhält das erste img-Tag des Elements, dessen ID content ist. Mit index = index % images.length; gelangen Sie zum ersten Bild, wenn Sie das letzte Bild in der Ausgabe haben.

Sie sehen die Bilder, weil diese Funktion auch das Attribut src setzt.

Genießen Sie unsere Tutorials? Abonnieren Sie DelftStack auf YouTube, um uns bei der Erstellung weiterer hochwertiger Videoanleitungen zu unterstützen. Abonnieren
Autor: 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

Verwandter Artikel - JavaScript Array

Verwandter Artikel - JavaScript Image