changing images automatically with javascript

Question

I have the current JavaScript problem. I have four divisions next to each other on my website that constantly rotate images on a 10 seconds interval. I need these intervals to keep rotating images at the current interval but start 5 seconds apart from each other in order to obtain a nice waterfall effect. How can I accomplish this using JavaScript?

image of how it looks on my websites' header

This is an example of the code I am currently using to display a single division and handle the rotation of the images.

<div class = "TestRotator">
<img src="http://bushveld.info/wp-content/uploads/2013/07/image1.png" alt="rotating" width="100" height="232" id="rotator">
<script type="text/javascript">
(function () {
    var rotator = document.getElementById('rotator'); // change to match image ID
    var imageDir = 'http://bushveld.info/wp-content/uploads/2013/07/';
    var delayInSeconds = 5;
    // set number of seconds delay
    // list image names
    var images = ['image2.png', 'image3.png', 'image4.png'];
    var num = 0;
    var changeImage = function () {
        var len = images.length;
        rotator.src = imageDir + images[num++];
        if (num == len) {
            num = 0;
        }
    };
    setInterval(changeImage, delayInSeconds * 1000);
})();
</script>
</div>

Answer 1

If I've understood your question correctly, you need something like this:

window.onload = function () {
    var // Customable parameters
        imageDir = 'http://bushveld.info/wp-content/uploads/2013/07/',
        interval = 2, // Interval between "flushes" in seconds. Must be > speed * maxScreens
        speed = 0.1, // "Flush" speed in seconds
        maxScreens = 4, // amount of used image tags
        images = 4, // amount of image sources, can be > maxScreens
        dir = 1, // 1 = from left to right, -1 = from right to left
        // Program
        flush,
        target = (dir > 0) ? 1 : maxScreens,
        targetOrigo = target,
        changeImage = function() {
            var img = document.getElementById('rotator' + target),
                id = parseInt(img.src.substr(img.src.length - 5, 1), 10) - dir;
            if (id < 1) {
                id = images;
            }
            if (id > images) {
                id = 1;
            }
            img.src = imageDir + 'image' + id + '.png';
            if (target !== maxScreens - targetOrigo + 1) {
                target += dir;
                setTimeout(changeImage, speed * 1000);
            }  else {
                target = targetOrigo;
                setTimeout(runRotation, interval * 1000);
            }
            return;
        },
        runRotation = function () {
            setTimeout(changeImage, speed * 1000);
        };  
    setTimeout(runRotation, 1000);
}

A live demo at jsFiddle

Notice, that I've put the function at window.onload, looks better when all the images are already loaded, before the rotation starts.

The snippet doesn't use setInterval() at all, instead it's based on nested setTimeout()s. This way you can avoid a mess, which you might get (depends on used browser), if user visits at other tab and then comes back to your site.

You can play with interval, "flush" speed, number of images you have on the rotation and even how many different images you like to use (max. = 9). You can also switch the direction of the rotation.

If you want to avoid two similar images to be shown at the same time, you can add image5.png to your image folder, and set images = 5.

Also version using an image source array available.