JavaScript how to make changing pictures

Find out how to use JavaScript it is easy to create changing pictures with an example of code.

Making Changing Pictures with JavaScript

Changing pictures on a website can be a great way to add visual interest and interactivity to your content. And one of the easiest ways to do this is with JavaScript.

In this example, we'll create a simple script that cycles through a few images. To start, we'll create an array of image URLs. We'll use a few images from Unsplash, but feel free to use any images you like:

const images = [
  'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60',
  'https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60',
  'https://images.unsplash.com/photo-1464207687429-7505649dae38?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60',
];

Next, we'll create an HTML element to hold the image. We'll use a div element with an id attribute so we can reference it in our JavaScript code:

<div id="image-container"></div>

Now we have our array of images and a container for the image. We can start writing the JavaScript for our image slider. We'll start by defining a few variables:

// Get the container element
const imageContainer = document.getElementById('image-container');

// Set a variable to track the current image index
let currentImageIndex = 0;

We've created a variable to store a reference to the image container element, and another to track the current image index. We'll use this index to determine which image to display in the container.

Next, we'll create a function that displays an image in the container. This function will take the index of the image to display as an argument:

function displayImage(imageIndex) {
  // Create an image element
  const imageElement = document.createElement('img');

  // Set the image source
  imageElement.src = images[imageIndex];

  // Empty the image container
  imageContainer.innerHTML = '';

  // Append the new image to the container
  imageContainer.appendChild(imageElement);
}

The displayImage() function takes an image index as an argument and uses it to set the source of an img element. It then empties the image container and appends the new image. Finally, we'll call the displayImage() function with the current image index to display the first image:

displayImage(currentImageIndex);

At this point, we have a working image slider. It displays the first image in the array and does nothing else. To make it cycle through the images, we'll create a function to update the current image index:

function nextImage() {
  // Increment the current image index
  currentImageIndex++;

  // If the index is larger than the images array length, reset it to 0
  if (currentImageIndex > images.length - 1) {
    currentImageIndex = 0;
  }

  // Display the new image
  displayImage(currentImageIndex);
}

The nextImage() function increments the current image index and checks to see if it's larger than the length of the images array. If it is, it resets the index to 0. Finally, it calls the displayImage() function to display the new image.

To make the slider cycle through the images automatically, we'll use the setInterval() function. This function takes a callback and a time interval as arguments. It will call the callback every time the interval has elapsed:

setInterval(nextImage, 3000);

Here, we're calling the nextImage() function every 3 seconds. Now our image slider is working!

To wrap up, let's add a button that allows users to manually cycle through the images. We'll create a button element and add it to our HTML:

<button id="next-image-button">Next Image</button>

Then, we'll add an event listener to the button that calls the nextImage() function when it's clicked:

// Get the button element
const button = document.getElementById('next-image-button');

// Add a click event listener to the button
button.addEventListener('click', nextImage);

And that's it! We now have a working image slider that cycles through a few images and can be manually controlled with a button.