Array de imágenes en JavaScript

Mehvish Ashiq 12 octubre 2023 JavaScript JavaScript Array JavaScript Image

Usar Objetos Array para Mostrar un Array de Imágenes en JavaScript
Use arrays para mostrar un array de imágenes en JavaScript

Este tutorial lo instruye sobre la creación e iteración del array JavaScript de imágenes; ejemplifica el uso de JavaScript Arrays y Array Objects. Cada ejemplo tiene un código de inicio y salida respectiva para practicar.

Usar Objetos Array para Mostrar un Array de Imágenes en JavaScript

Código 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>

Código CSS:

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

Código 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;
    }
  }
}

Producción:

array de imágenes javascript - iteración de imagen usando objeto

En este código, cada elemento img es un image objeto. El src también se define mediante la asignación de una cadena que se refiere al nombre del archivo que tiene esa imagen en particular.

La función nextImage obtiene el primer elemento que tiene id mainImage y luego itera sobre las últimas imágenes. La función previousImage también obtiene el primer elemento que tiene el id mainImage (al igual que el método nextImage), pero realiza un bucle desde la imagen actual hacia atrás.

Use arrays para mostrar un array de imágenes en JavaScript

Código 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>

Código CSS:

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

Código 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];
}

Producción:

javascript array de imágenes - iteración de imagen usando matriz

La función makeImage construye las etiquetas img y especifica su atributo src. Esta función se llama inmediatamente después de cargar la página usando el evento onload en la etiqueta <body>. El createElement crea el elemento HTML (estamos creando un elemento img para este ejemplo).

Luego especifica el img.src para obtener la imagen. La función appendChild agrega el elemento img dentro del elemento cuyo id es content.

En palabras simples, la función makeImage crea etiquetas img dentro de la etiqueta cuyo valor de identificación es content.

La primera línea de código en la función nextImage obtiene la primera etiqueta img del elemento cuyo id es content. El index = index % images.length; te lleva a la primera imagen si tiene la última imagen en la salida.

Ves las imágenes porque esta función también establece el atributo src.

¿Disfrutas de nuestros tutoriales? Suscríbete a DelftStack en YouTube para apoyarnos en la creación de más guías en vídeo de alta calidad. Suscríbete

Autor: Mehvish Ashiq

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

Array de imágenes en JavaScript

Usar Objetos Array para Mostrar un Array de Imágenes en JavaScript

Use arrays para mostrar un array de imágenes en JavaScript

Artículo relacionado - JavaScript Array

Artículo relacionado - JavaScript Image