0

いくつかの配列とループを使用して「画像回転子」を作成しました。いくつかのウェブサイトを持っている友人向けです。それらのウェブサイトには、彼が数秒ごとに頼りたかった広告があります。私はそれを完成させましたが、より多くのループと配列を利用したかったので、広告が多かれ少なかれ別のサイトで使用するときに変更する必要が少なくなりました.

ジャバスクリプトはこちら

(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つのリストが存在する前. これはおそらくローテーターの設定としては最高のものではないことは承知していますが、私は正確には JavaScript を使用しているわけではありません。そして、最後の画像が変わらないことを除けば、まともに機能しているようです。

問題は前述の通り、最後の画像が変わらない。問題は最後のループにあると感じていますが、考えられることはすべて試しましたが、うまくいきません。

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て、各ループで何をしているかを報告します。コンソール出力はいくつかの方法で表示できます (そのうちの 1 つは firefox の firebug です)。このプロセスに慣れていない場合は、ブラウザーでの JavaScript のデバッグについて読むことができます。それはあなたを大いに助けます。

幸運を！

于 2013-07-08T19:26:03.470 に答える