Image change every 30 seconds - loop

Question

I would like to make an image change after 30 seconds. The javascript I'm using looks like this:

var images = new Array();
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
setTimeout("changeImage()", 30000);
var x = 0;

function changeImage() {
    document.getElementById("img").src=images[x];
    x++;
}

HTML:

<img id="img" src="startpicture.jpg">

Now I haven't tested this one yet, but if my calculations are correct it will work :)

Now what I also want is to make a "fading transition" and I would like the changing of images to loop (it restarts after all the images have been shown).

Do any of you guys know how to do that?

`setTimeout` only invokes once; you're looking for `setInterval`. also the code to run should be a function reference, not a string. so `var timerid = setInterval(changeImage, 30000);` — lincolnk, Jul 16 '10 at 13:44
Have a look at [innerfade](http://medienfreunde.com/lab/innerfade/). [Here's an example](http://www.realreads.co.uk/) where I used it to do exactly what you're after, I think. — Skilldrick, Jul 16 '10 at 12:23
I've used this jQuery plugin in the past: [CrossSlide](http://tobia.github.com/CrossSlide/) It worked great and does exactly what you want. — Pat, Jul 16 '10 at 12:22

score 14 · Accepted Answer · edited Nov 07 '20 at 14:41

I agree with using frameworks for things like this, just because its easier. I hacked this up real quick, just fades an image out and then switches, also will not work in older versions of IE. But as you can see the code for the actual fade is much longer than the JQuery implementation posted by KARASZI István.

function changeImage() {
    var img = document.getElementById("img");
    img.src = images[x];
    x++;        
    if(x >= images.length) {
        x = 0;
    } 
    fadeImg(img, 100, true);
    setTimeout("changeImage()", 30000);
}

function fadeImg(el, val, fade) {
    if(fade === true) {
        val--;
    } else {
        val ++;
    }       
    if(val > 0 && val < 100) {
        el.style.opacity = val / 100;
        setTimeout(function(){ fadeImg(el, val, fade); }, 10);
    }
}

var images = [], x = 0;
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
setTimeout("changeImage()", 30000);

You could improve your code and save space using a few simple alternatives: ```x = (x + 1) % images.length;``` , ```val = val + (fade ? -1 : 1);```, ```var images = ["image1.jpg", "image2.jpg", "image3.jpg"];```. — Erik Post, Oct 20 '14 at 16:32

score 8 · Answer 2 · edited Aug 02 '16 at 12:14

You should take a look at various javascript libraries, they should be able to help you out:

All of them have tutorials, and fade in/fade out is a basic usage.

For e.g. in jQuery:

var $img = $("img"), i = 0, speed = 200;
window.setInterval(function() {
  $img.fadeOut(speed, function() {
    $img.attr("src", images[(++i % images.length)]);
    $img.fadeIn(speed);
  });
}, 30000);

score 2 · Answer 3 · answered Oct 09 '16 at 16:21

setInterval function is the one that has to be used. Here is an example for the same without any fancy fading option. Simple Javascript that does an image change every 30 seconds. I have assumed that the images were kept in a separate images folder and hence _images/ is present at the beginning of every image. You can have your own path as required to be set.

CODE:

var im = document.getElementById("img");

var images = ["_images/image1.jpg","_images/image2.jpg","_images/image3.jpg"];
var index=0;

function changeImage()
{
  im.setAttribute("src", images[index]);
  index++;
  if(index >= images.length)
  {
    index=0;
  }
}

setInterval(changeImage, 30000);

Ketan Patil · Answer 4 · 2017-03-23T20:08:07.703

Just use That.Its Easy.

<script language="javascript" type="text/javascript">
     var images = new Array()
     images[0] = "img1.jpg";
     images[1] = "img2.jpg";
     images[2] = "img3.jpg";
     setInterval("changeImage()", 30000);
     var x=0;

     function changeImage()
     {
                document.getElementById("img").src=images[x]
                x++;
                if (images.length == x) 
                {
                    x = 0;
                }
     }
</script>

And in Body Write this Code:-

<img id="img" src="imgstart.jpg">

Image change every 30 seconds - loop

4 Answers4

Linked