CodePen Embed - Random Image Generator

<html>
  <body>
    <div class="box">
  </body>
    </html>

html, body {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  width: 200px;
  height: 350px;
  background-size: cover;
}

var box = document.querySelector('.box');

var imageUrls = [
  "https://images.unsplash.com/photo-1693305911839-ec783e3145d6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1935&q=80",
  "https://images.unsplash.com/photo-1692821565372-15f7219ede0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80",
  "https://images.unsplash.com/photo-1692175033119-8e2224157199?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80",
  "https://images.unsplash.com/photo-1692283578489-ee4cfffa3ae1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80",
  "https://images.unsplash.com/photo-1587336477546-bb3a2a7887fd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1935&q=80"
];

var urlArrayLength = imageUrls.length; //gets the index length of the array


function ImageChange() {
  let index = 0;
  
  function newImage() {
    //the box's background image will be set to the image url with that index
    box.style.backgroundImage = "url(" + imageUrls[index] + ")";
    //After some time the index will go up by one and pick the next url, but if the index is = to the imageUrls[] length then it wraps back around to the first index
    index = (index + 1) % urlArrayLength;
}
  //sets amount of time until the next index is picked
  setInterval(newImage, 200);
  
}

ImageChange();

This Pen is owned by Lensco825 on CodePen.

See more by @lensco825 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.