Question 291100 in Javascript Question posted in
A very good W3school tutorial can be found here.

How can I change multiple images each day to different ones from the same folder using JavaScript?

Im gunna try this again in more detail so I have a website with multiple images on the home page which I change manually each week from my images folder which has over 500 images, is there a way I can do this using javascript so each day it changes so a different image, kind of like storing all the image links in a javascript file, does this make sense?

here is the code to display each section take a look at the website page so you can understand more what I mean wealthybones dot com

<h3 class="no-title">Recently Added</h3>
        <div class="no">
            <img src="images/move.png" alt="">
            <a href="files/jamaledwards"><img src="images/deadhome/jamaledwards.png" alt=""></a>
            <a href="files/margaretjohn"><img src="images/deadhome/margaretjohn.png" alt=""></a>
            <a href="files/michaelgambon"><img src="images/deadhome/michaelgambon.png" alt=""></a>
            <a href="files/halroach"><img src="images/deadhome/halroach.png" alt=""></a>
            <a href="files/genekelly"><img src="images/deadhome/genekelly.png" alt=""></a>
            <a href="files/petercushing"><img src="images/deadhome/petercushing.png" alt=""></a>
            <a href="files/jimhenson"><img src="images/deadhome/jimhenson.png" alt=""></a>
            <a href="files/hennyyoungman"><img src="images/deadhome/hennyyoungman.png" alt=""></a>
            <a href="files/donaldpleasence"><img src="images/deadhome/donaldpleasence.png" alt=""></a>
            <a href="files/brookemccarter"><img src="images/deadhome/brookemccarter.png" alt=""></a>
            <a href="#search22"><img src="images/search.png" alt=""></a>
        </div>
    </div>
Tags:

2

Answers


  1. 0

    you can give IDs to all the images and use this
    document.getElementById("image-id").src= "../template/save.png";

    also add index in the file name of image
    and create a function and this function should have a for loop which can assign random images to the img.scr like this : document.getElementById("image-id").src= "../template/save[index].png";

    Login or Signup to reply.
  2. 0

    You can create an array that store all the images

    const images = ["name", "nameA", "nameB", "..."]

    Then create a function to handle how many images you want to show on the website and provide two parameters, first is the array itself and the number of images you want to show. Here we can use javascript slice method to select random images

    const selectImages = (images, gap) => {
    const firstImg = Math.floor(Math.random() * (images.length - gap) + 1)
    const lastImg = firstImg - gap

    return images.slice(firstImg, lastImg)
}

    Now use the setInterval() method to execute the selectImages function and update the html each day using DOM Manipulation

    setInterval(() => {
    const selectedImages = selectImages(images, 10)
    
    // looping the selected images and do DOM Manipulation
}, 24 * 60 * 60 * 1000)

    I believe there is a more convenient way to accomplish this task.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search