I've got 5 images that I want to display one after the other with a time delay, e.g.

image one displayed
0.5 seconds
image two displayed
0.5 seconds
image three displayed

At the moment the HTML looks like this:

<div id="header">
    <img id="headerImage0" src="">
    <img id="headerImage1" src="">
    <img id="headerImage2" src="">
    <img id="headerImage3" src="">
    <img id="headerImage4" src="">

The CSS looks like this:

div#header img
    visibility: hidden
div#header img.headerImageShow
    visibility: visible

The JavaScript looks like this:

function showImages(i) {
    var image = document.getElementById("headerImage"+i);
    image.className = "headerImageShow";
    var t=setTimeout("showImages(i)",1000);

It seems that you can't pass variables to a function within the setTimeout part of the code, so the showImages function isn't getting passed the i variable that it needs . . . I'm really stuck on how to fix this

Is "setTimeout" deprecated as well? The only articles that I can seem to find on it are about 6 years old.

Hi Sean

Your showImages function will be called 1000 milliseconds after each call to setTimeout. As the iteration of your 'for' loop will complete very quickly, you should expect to see a one second delay followed by all your images shown in quick succession.

Perhaps the setInverval function is what you are looking for?

Thanks LaxLoafer, I'll try the setInterval function then post as to whether it works or not

At the moment it doesn't load any of the images, simply because the i variable isn't passed to the showImages function, do you know any way around that?

I've tried using the setInterval function but it seems to do the same thing.

unless I copy

var t=setTimeout("showImages()",1000);

five times it only displays the first image, if I copy it five times it shows all five images but they display after the initial 1000 milisecond interval.

The new code is as follows:

function showImages() {
    var image = document.getElementById("headerImage"+imageNumber);
    image.className = "headerImageShow";
var t=setTimeout("showImages()",1000);

Although I have no idea quite how clearInterval() comes into this?

I'd also like to take this opportunity to say I'm quite a beginner concerning JavaScript (as you can probably tell)

The difference between setTimeout and setInterval is the former will call your showImages function only once.


The three lines of code above will call showImages three times, at 1 second apart.

If you like you could wrap this up into a for loop like:

for(var i = 0; i <= 2; i++) {
setTimeout("showImages(i)", i * 1000);

setInterval works slightly differently. You need only call it the once:

var theInterval = setInterval("showImages()", 1000);

This will call your showImages function every second until cleared. Note you need to pass clearInterval the reference obtained from setInterval:


You'll want to delay calling clearInterval immediately, otherwise setInterval will appear to do nothing. One way to do this is to assign it to a button click on your page.

<button onclick="window.clearInterval(theInterval)">Stop</button>

Using the setInterval approach, you'd need some way to keep a track of which image is displayed. You could do this with a global variable, which is then incremented inside your showImages function.

var imageIndex = 0;
function showImages() {

Well, something like that. Hope this helps.

Thank you LaxLoafer, as this post maybe old, you had one of the most clear and concise post about the difference between setTimeout and setInterval. In about 2 minutes I know how to use the setInterval and had it working without any problems.

Once again, thank you.