Variations in the timing of image transitions

Question

Variations in the timing of image transitions

Currently, as a GCSE computing student, I am working on being able to modify the interval between different images in my code. Here's what I have so far...

<!DOCTYPE html>
<html>
<body>
<h1> Adjusting Traffic Light Changes </h1>

<img src="RED.jpg" id= "traffic" width="155" height="198">
<script>

var myImage = document.getElementById("traffic");

 var imageArray = ["RED.jpg", "RED-ORANGE.jpg", "GREEN.jpg", "ORANGE.jpg"];

 var imageIndex = 0; 

 function changeImage() 
{
  myImage.setAttribute("src",imageArray[imageIndex]);
  imageIndex++;
  if (imageIndex >= imageArray.length) {
    imageIndex = 0;
 }

}

setInterval(changeImage,1000);

</script>
</body>
</html>+

If you could incorporate parts of this code while adjusting the intervals, it would be perfect.

javascript arrays dreamweaver intervals

Answer 1

Answer №1

If you're looking to tackle this problem with JavaScript exclusively:

Check out the official documentation here

// Initialize a timeoutID variable using window.setTimeout(code, [delay]);
var imageTimers = [500, 1000, 2000, 4000];
var timeToChange = Math.random() * 3000; // You can adjust this value as needed
var timer = setTimeout(changeImage, timeToChange);

// Within the changeImage function, update the timeToChange variable.
function changeImage() {
   // Your code logic goes here...
   clearTimeout(timer);
   timeToChange = imageTimers[imageIndex];
   timer = setTimeout(changeImage, timeToChange);
}

Answer 2

If you're looking to tackle this problem with JavaScript exclusively:

Check out the official documentation here

// Initialize a timeoutID variable using window.setTimeout(code, [delay]);
var imageTimers = [500, 1000, 2000, 4000];
var timeToChange = Math.random() * 3000; // You can adjust this value as needed
var timer = setTimeout(changeImage, timeToChange);

// Within the changeImage function, update the timeToChange variable.
function changeImage() {
   // Your code logic goes here...
   clearTimeout(timer);
   timeToChange = imageTimers[imageIndex];
   timer = setTimeout(changeImage, timeToChange);
}

Variations in the timing of image transitions

Answer №1

Similar questions

IE11 is encountering an error with an "Expected identifier" message in the vendor.js file related to Webpack's variable

How can I address the issue of having multiple console logs within the

Utilize $.get AJAX to extract data from a multidimensional JSON array

Fresh ajax requests are not clearing the current data displayed in the JSP table

How can I focus on a single dimension of a 2D array in C++?

Tips for implementing a delay in jQuery after an event occurs

Extract the data from a dynamically loaded AJAX page

What is the best way to disregard all pathNames and display my index.php file directly from the root of my website?

Creating Smooth Transitions Between Two Textures Using Three.js, Implementing Zoom and Blend Effects

Using the useState() hook with a component as an argument

What benefits does utilizing Microsoft Workflow Foundations offer?

Combining column values with AngularJS

Create an array using the keyword "where"

Develop a Rails object using AJAX and JavaScript

Sending a function in React.js from one functional component to another

Clear the date range filter for a specific DataTable

Condensing text saved in session storage

Generate a three-dimensional array with irregular edges in Java

Tips on how to showcase particular keys from json information in React

Is it possible to use AJAX in JavaScript to dynamically update page titles?