- How the Rotating Images Code Works
- The Coding Plan
- Detecting the Load Event
- Triggering the Function from the Load Event
- Generating Random Numbers
- Creating the Image Path
- DOM Scripting
- Assembling the Image Element
- Adding the Image Element to the Page
- Reviewing the Working Page
The Coding Plan
- Generate a random number between 1 and 5.
- Assemble a URL comprising the folder path and filename, using the random number in the filename.
- Dynamically create an image element with the URL as the src attribute.
- Add the image element into a div element that's already in the page markup, causing the image to display on the page.
Before we do this, we need some markup, which for this example is very simple: