0

我使用一些数组和循环制作了一个“图像旋转器”。这是给有一些网站的朋友的。在那些网站上，每隔几秒钟就会出现一些他想要使用的广告。我已经完成了它，但想利用更多的循环和数组，这样当他在广告或多或少的不同网站上使用它时，他的改变就更少了。

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

这样，他只需要设置时间、文件夹名称，并增加/减少带有名称的广告列表。在有 3 个其他列表会增加/减少之前。我知道这可能不是最适合旋转器的设置，但我并不完全是 javascripter。减去最后一张图像没有改变，它似乎工作得很好。

问题如上所说，最后一张图没有变化。我有一种感觉，问题出在最后一个循环中，但我已经尝试了所有我能想到的方法，但无法让它发挥作用。

Html 方面看起来是这样的：

<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/>
...

如果您需要其他任何东西，我可以尝试提供它，但我认为这几乎就是全部。感谢任何可以提供帮助、建议和指点的人。

4

1 回答 1

1

问题可能在这里：

while(arr.length < NOI)

因为在最后一张图像上，arr.length将等于NOI，它不会通过您的小于测试，并且不会执行 while 循环。试着写这个：

while(arr.length <= NOI)

另外，在其中抛出一些console.log语句来报告它在每个循环中所做的事情。您可以通过多种方式查看控制台输出（其中包括 firefox 上的 firebug）。如果你不熟悉这个过程，你可以阅读浏览器中的 javascript 调试；它会帮助你很多。

祝你好运！

于 2013-07-08T19:26:03.470 回答