Having trouble passing multiple arrays as parameters into setTimeout to create a slideshow

Question

Having trouble passing multiple arrays as parameters into setTimeout to create a slideshow

I've been working on a project to create a basic slideshow with 3 rotating images that should restart as soon as the last one is displayed, with a 5000ms interval between each image.

<div id="slideshow">&nbsp;</div>

<script type="text/javascript">
var imageArray = ['Image1','Image2','Image3'];
var currentIndex = 0;

nextPic = function(currentIndex,slideshow) {

  var theHTML = '<img src="http://www.domain.com/Pics/Test-' + imageArray[currentIndex] + '.jpg">';
  document.getElementById("slideshow").innerHTML = theHTML;

  if (currentIndex < imageArray.length) {
      currentIndex = currentIndex + 1;
  }
    else {
      currentIndex = 0;
    }

  setTimeout("nextPic(" + currentIndex + ")", 5000);
}

nextPic(currentIndex, "slideshow");

</script>

Despite trying various versions of Javascript code, I keep encountering the same issue: after displaying the last image (Test-Image3.jpg), an attempt is made to display an undefined image ("Test-undefined.jpg") before resetting back to the first image. Everything works perfectly except for this hiccup, and it's quite frustrating.

javascript arrays slideshow settimeout rotator

Answer 1

Answer №1

It is important to consider that when adding one to the current index, it should be done after checking against the array length:

if (currentIndex < imageArray.length - 1) {
  currentIndex = currentIndex + 1;
}
else {
  currentIndex = 0;
}

Alternatively:

currentIndex += 1;
if (currentIndex >= imageArray.length)
  currentIndex = 0;

There is actually no need to pass the parameter at all because the function can directly access the global variable. While it would be ideal not to have a global variable, if you already do, it might as well be utilized.

Answer 2

It is important to consider that when adding one to the current index, it should be done after checking against the array length:

if (currentIndex < imageArray.length - 1) {
  currentIndex = currentIndex + 1;
}
else {
  currentIndex = 0;
}

Alternatively:

currentIndex += 1;
if (currentIndex >= imageArray.length)
  currentIndex = 0;

There is actually no need to pass the parameter at all because the function can directly access the global variable. While it would be ideal not to have a global variable, if you already do, it might as well be utilized.

Answer 3

Answer №2

Modify to:

  if (counter < totalArray.length - 1) {
      counter = counter + 1;
  }

This adjustment is necessary to prevent displaying an out-of-bounds index such as totalArray[totalArray.length].

Furthermore, instead of:

counter = counter + 1;

You can simplify it by using:

counter ++;

Answer 4

Modify to:

  if (counter < totalArray.length - 1) {
      counter = counter + 1;
  }

This adjustment is necessary to prevent displaying an out-of-bounds index such as totalArray[totalArray.length].

Furthermore, instead of:

counter = counter + 1;

You can simplify it by using:

counter ++;

Answer 5

Answer №3

An improved approach with setInterval():

const slideshow = function(){
   // Check if we have reached the end of the array, either replay or halt.
   if (currentIndex == images.length){
        currentIndex = 0; // Restart slideshow

   /* To stop the slideshow, include the following:
   *     window.clearInterval(slideshowInterval)     
   *     return false;
   */

   }
     let htmlContent = '<img src="http://www.mywebsite.com/Pics/' +    
                    images[currentIndex] + '.jpg">';
     document.getElementById("slideshow").innerHTML = htmlContent;
     currentIndex += 1;
}

const images = ['Image1','Image2','Image3'];
let currentIndex = 0;
let intervalSpeed = 5000;
let slideshowInterval = window.setInterval(slideshow, intervalSpeed); // Advance to next image every 5000 milliseconds

Answer 6

An improved approach with setInterval():

const slideshow = function(){
   // Check if we have reached the end of the array, either replay or halt.
   if (currentIndex == images.length){
        currentIndex = 0; // Restart slideshow

   /* To stop the slideshow, include the following:
   *     window.clearInterval(slideshowInterval)     
   *     return false;
   */

   }
     let htmlContent = '<img src="http://www.mywebsite.com/Pics/' +    
                    images[currentIndex] + '.jpg">';
     document.getElementById("slideshow").innerHTML = htmlContent;
     currentIndex += 1;
}

const images = ['Image1','Image2','Image3'];
let currentIndex = 0;
let intervalSpeed = 5000;
let slideshowInterval = window.setInterval(slideshow, intervalSpeed); // Advance to next image every 5000 milliseconds

Having trouble passing multiple arrays as parameters into setTimeout to create a slideshow

Answer №1

Answer №2

Answer №3

Similar questions

Error occurs when attempting to reference an object from an NPM package

Notifying asynchronous completion using Gulp, Babel, and configuration file config.yml

What is the method for modifying the chosen color using a select option tag instead of a list?

customizing highcharts title within a popup window

Encapsulate ng-style within quotation marks

The navigation/hamburger icon vanishes after a click on a page link

When the page is refreshed, the JWT token mysteriously disappears from the header. How can this issue be resolved

How can I update a Django webpage using AJAX without having to refresh it?

What is the best way to make a request to the deployed API on Vercel?

Easy method for changing a value in an array using PHP if the index is known

JavaScript Subscribe / Unsubscribe Button

The special function for switching elements within arrays of arrays may yield unpredictable results at certain indexes

Tips for retrieving javascript-generated HTML content

The arrangement of a table, an iframe, and another table being showcased in close proximity

Is it advisable to implement NumPy for handling 3D functions and matrices in Python code?

ordering an array based on a boolean property in TypeScript

Searching for the coordinates of a specific value within a multidimensional array using MATLAB

Guide on using webpack to import jQuery

Comparable user interface on par with what we find on Windows Phone 7

Performance issues with Three.js geometry merging