Question

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

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

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

Answer 1

问题可能在这里：

while(arr.length < NOI)

因为在最后一个图像上，arr.length将等于NOI，它不会通过你的小于测试，而while循环将不会执行。请尝试改写：

while(arr.length <= NOI)

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

祝你好运！

Javascript图像旋转器循环

1 个答案: