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.

Answer 2

I've fiddled it a lot! (I changed it big time.)

chenged setInterval() with setTimeout() and many others.

Is this what you wanted?

PS: state holds the 1st image to which the imgs change. and the difference in the timeout (200 milliseconds is in order to just to make some difference in between them, yuo can change it to a round number if you want to).

Answer 3

Thanx alot for the input. I solved this issue by adapting the code in this manner...

           (function() {
           var rotator3 = document.getElementById('rotator3');  // change to match   image ID
           var imageDir = 'http://bushveld.info/wp-content/uploads/2013/07/';                          
                                      // set number of seconds delay
            // list image names
           var images = ['image2.png', 'image3.png', 'image4.png',  'image1.png'];

// don't change below this line
           var num = 0;
           var changeImage = function() 
           {
             var len = images.length;
             rotator3.src = imageDir + images[num++];
                 if (num == len)
                 {
                     num = 0;
                 }
           };

          function SwImg() {
      var rotate = setInterval(changeImage, 20000);


     }


   setTimeout(SwImg,15000);


        })();

This tweak basically creates an initial delay of 5++ seconds at each division with the standard 20 seconds delay interval between switches, rotating each image in each division 5 seconds after the other. Here is a link to the website , will be done end of this week. Thanks again for the input, really awesome and creative ways of solving this issue!

Cheers