CODEWITHSUNDEEP
javascriptloops
Eric
Eric

Reputation: 399

loop a series of image in javascript

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>

Upvotes: 6

Views: 38793

Answers (3)

Jean-Joseph
Jean-Joseph

Reputation: 129

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

})();

Upvotes: 0

Joseph
Joseph

Reputation: 119827

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);
}());

Upvotes: 4

UVM
UVM

Reputation: 9914

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

Upvotes: 0

Related Questions