How to set up an array of images and loop through them individually

Question

This is probably fairly simple task for someone more experienced with javascript. I'd like to have an array of images and then loop through them to display each one with a certain interval of time between each one.

Store images in an array: var anArray = [image1, image2, image] (Can I put images into an array by simply put their src in in an array like this? When I tried it treated each like a string.)
Create a loop to go through each image in the array and fadeIn each image: for (var i = 0; i <= array.length; i++) But I don't want want it to fade in all the images at once, I want one at a time.
Set an interval of time: setInterval(functioin() {}, 1000); So that each image is displayed 1 second or however many seconds after each other.

I know I could use a plugin, but I'm trying to learn javascript so I want to avoid taking shortcuts(except of course the shortcut of asking for help on here!)

Thanks

Show your current code?

Paddy
– Paddy

2014-12-16 07:40:49 +00:00
Commented Dec 16, 2014 at 7:40 — Paddy
– Paddy, Commented Dec 16, 2014 at 7:40

pratiklodha · Accepted Answer · 2014-12-16 07:52:33Z

1

var img;
for(length)
{
  img[i]=new Image();
  img[i].src="src";
}

//for storing image as a array

var count=0;
var timerid = setInterval(function()
{
   //fade in image
   count++;
   if(count > length)clearInterval(timerId); 
}, 1000);

Better option is add all the image to DOM on image.onload with a display:none tag and then use a loop to fade in the image one by one,

answered Dec 16, 2014 at 7:52

pratiklodha

1,12512 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

aprobert Over a year ago

Thanks for the quick response and breaking it down

aprobert Over a year ago

If I've already added images in html set display to none how would the loop look to fade in the images? for(var i = 0; i<=3; i++) { //how would I fade in the images here as the iterator counts up?

sidneydobber · Accepted Answer · 2014-12-16 08:42:35Z

Another option is to use a closure for the counter. Counters are most elegantly implemented as closures.

// Wrapping the code in a self envoking function prevents polluting the global namespace.
(function() {

    // The images array.
    var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];

    // The counter function using a closure.
    var add = (function() {
        // Setting the counter to the last image so it will start with the first image in the array.
        var counter = images.length - 1;
        return function() {
            // When the last image is shown reset the counter else increment the counter.
            if(counter === images.length - 1) {
                counter = 0;
            } else {
                counter+=1;
            }
            return counter;
        }
    })();

    // The function for changing the images.
    setInterval(
        function() {
            console.log(images[add()]);
        }
    , 1000);

})();

Collectives™ on Stack Overflow

How to set up an array of images and loop through them individually

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related