Latze Latze - 4 months ago 18
HTML Question

Image change every 30 seconds - loop

I would like to make an image change after 30 seconds...

The code I'm using looks like this:

Script:

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++;
}


And the body:

<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? I don't :)

Answer

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);
Comments