6

i want to loop a series of images in javascript. below is the code i have so far

<html>
<head>
</head>

<body>
<img src="images/image1.jpg" alt="rotating image" width="600" height="500" id="rotator">

<script type="text/javascript">
(function() {
var rotator = document.getElementById('rotator');  // change to match image ID
//var imageDir = 'images/';                          // change to match images folder
var delayInSeconds = 1;                            // set number of seconds delay
// list image names
var images = ['1.jpg','2.jpg', '3.jpg', '4.jpg'];

// don't change below this line
var num = 0;
var changeImage = function() {
    var len = images.length;
    rotator.src = images[num++];
    if (num == len) {
        num = 0;
    }
};
setInterval(changeImage, delayInSeconds * 50);
})();
</script>
</body>
</html>

It can only display the image i have declared in the "var image". if i have 10000 image , how to do that . I have tried using a 'for' loop but it failed .. any suggestions ?? thanks in advance

==============================================================

update version that Joseph recommend : 

<html>
<head>
</head>

<body>
<img src="images/1.jpg" alt="rotating image" width="600" height="500" id="rotator">

<script type="text/javascript">
(function() {
var rotator = document.getElementById('rotator'), //get the element
   var delayInSeconds = 1,                           //delay in seconds
   var num = 0,                                      //start number
   var len = 9999;                                      //limit
setInterval(function(){                           //interval changer
    num = (num === len) ? 0 : num;                //reset if limit reached
    rotator.src = num + '.jpg';                     //change picture
    num++;                                        //increment counter
}, delayInSeconds * 1000);
}());
</script>
</body>
</html>
Improve this question
2
  • 1. does rotate mean change of images? 2. r u giving correct folder path? i dont see in the code. Commented May 15, 2012 at 6:10
  • i put the html file together with the code so i think dun need path right? @Joseph , it show first image only and 2nd image wont come out Commented May 15, 2012 at 6:27

3 Answers 3

Reset to default
4

Assuming that images have the same sequential filenames, this would be best when looping through a lot of them:

(function() {
    var rotator = document.getElementById('rotator'), //get the element
        dir = 'images/',                              //images folder
        delayInSeconds = 1,                           //delay in seconds
        num = 0,                                      //start number
        len = N;                                      //limit
    setInterval(function(){                           //interval changer
        rotator.src = dir + num+'.jpg';               //change picture
        num = (num === len) ? 0 : ++num;              //reset if last image reached
    }, delayInSeconds * 50);
}());
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

@Eric my code doesn't include the images folder. do the necessary changes, not just copy paste.
i put the file same folder with the images. and it only show the first image only and it didnt show the next image
@Eric Sorry for the late update, I found the error to be the increment. It should be a ++num instead of num++. Check the updated answer.
0

AFAIK, you can use the same logic to display the images in small chunk as your browser will crash if you try to display all 10000 images at the same time.So display 5-10 images on the page with your current logic and ask the user to retrieve next set.You can see this kind of implementation in many image sharing applications.Hope this will help you

Improve this answer

7 Comments

i am doing a program which can auto show the images with a fast speed which it will act actually similar to a video.
Well,but how you are going to store these many images in the browser?
i dun think it will store at browser. it is juz to display a sequence of image only.
so you are going to fetch all these 10000 images from server?
those 10000 images are all store inside the machine. so i juz call them and display only
|
0 
(function () {
var rotator = document.getElementById('rotator');  // change to match image ID
var imgDir = 'images/';          // change to match images folder
var delayInSeconds = 1;                         // set number of seconds delay    

// Yes I made changes below this line
var num = 0;
var changeImage = function () {
    rotator.src = imgDir + num++ + ".jpg";
    //var len = rotator.src.length;
    if (num == 5) {
        num = 0;
    }
};
setInterval(changeImage, delayInSeconds * 1000);

})();

Improve this answer

1 Comment

Try this one. No need to use an array, just increment within the dir using num. You will have to specify img limit

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.