Javascript image rotator loop

Question

I have made an "image rotator" using a few arrays and loops. It is for a friend that has some websites. On those websites there are advertisements that he wanted to have resorted every few seconds. I had it completed, but wanted to utilize more loops and arrays so there would be less for him to change when he uses it on a different site that has more or less ads.

Here is the Javascript

(function () {

     var NOI = 12;                 // number of images
     var delayInSeconds = 5;       // set number of seconds delay
     var imageDir = 'images_ad/';  // change to match images folder

     // list image names

     var ImageNames = new Array(NOI);
         ImageNames[0] = 'ad1.jpg';   
         ImageNames[1] = 'ad2.jpg'; 
         ImageNames[2] = 'ad3.jpg'; 
         ImageNames[3] = 'ad4.jpg'; 
         ImageNames[4] = 'ad5.jpg'; 
         ImageNames[5] = 'ad6.jpg'; 
         ImageNames[6] = 'ad7.jpg'; 
         ImageNames[7] = 'ad8.jpg'; 
         ImageNames[8] = 'ad9.jpg'; 
         ImageNames[9] = 'ad10.jpg';
         ImageNames[10] = 'ad11.jpg';
         ImageNames[11] = 'ad12.jpg';

      // do not change below this line ---------------------------------//   


      var changeImage = function () {
          var arr = []
          while(arr.length < NOI){
              var randomnumber=Math.floor(Math.random()*(NOI))
              var found=false;
              for(var i=0;i<arr.length;i++){
                  if(arr[i]==randomnumber){found=true;break}
              }
              if(!found)arr[arr.length]=randomnumber;
          }
          var num = [];
          var rotator = []
          for (var i=0; i<NOI; i++){
              rotator[i] = document.getElementById('rotator' + i);            

              num[i] = arr[i]
              for (var x = 1; x < num.length; x++) {
                  rotator[x].src = imageDir + ImageNames[num[x]];
              }

          }    
    };
    setInterval(changeImage, delayInSeconds * 1000);
})();

This way he would only have to set the time, the folder name, and increase / decrease the list of ads with their names. Before there were 3 other lists that would increase /decrease. I know this probably isn't the greatest set up there is for a rotator, but I'm not exactly a javascripter. And it seems to work decent minus the last image not changing.

The problem is as mentioned above, the last image does not change. I have a feeling that the problem is in the last loop but I've tried everything I can think of and can't get it to work.

Html side would look along the lines of:

<img src="ad1.jpg" alt="rotating image" width="150" height="82" id="rotator1" />
<br/>
<img src="ad2.jpg" alt="rotating image" width="150" height="82" id="rotator2" />
<br/>
<img src="ad3.jpg" alt="rotating image" width="150" height="82" id="rotator3" />
<br/>
...

If you need anything else I can try and provide it, but I think thats pretty much all there is. Thanks to anyone that can offer help, suggestions, and pointers.

You might want to look at this solution to a similar question: http://stackoverflow.com/a/12646864/495935 This will shuffle your array in a simple manner and give good random results. Then remove and re-render the array of images. — Surreal Dreams, Jul 08 '13 at 20:03

Chris · Accepted Answer · 2013-07-08T20:23:43.947

The problem may be here:

while(arr.length < NOI)

Because on the last image, arr.length will be equal to NOI, which doesn't pass your less-than test, and the while loop won't execute. Try writing this instead:

while(arr.length <= NOI)

Also, throw some console.log statements in there to report what it's doing on each loop. You can view the console output in several ways (firebug on firefox among them). If you're not familiar with this process, you can read about javascript debugging in browsers; it will help you a ton.

Good luck!

Javascript image rotator loop

1 Answers1