javascript - 同じページに jquery 画像回転子を 3 回 (それぞれ異なる画像を使用して) 追加します。

Question

私のページに 3 つの jquery 画像回転子 (infinite-rotator.js) を挿入する必要があります。それぞれに異なる画像が表示されますが、すべてのギャラリーは同じ機能を持ちます。

IDを使用してそれぞれ3つのdivを作成しました。3 つのギャラリーが機能しますが、同時に機能しません。最初のギャラリー画像が終わると、2番目のギャラリー画像が表示されます。そしてこれらの画像が終わると、3つ目のギャラリーがスタート。同時に開始し、互いに独立して実行する 3 つのギャラリーが必要です。

私は初心者なので、誰かが私を助けることができれば、私は感謝します.

HTML コード:

<div id="rotating-item-wrapper">
  <img src="images/inicio_mini01_01.jpg" alt="photo of building across from our office" class="rotating-item" width="308" height="303" />
  <img src="images/inicio_mini01_02.jpg" alt="building entrance with neon backlit walls" class="rotating-item" width="308" height="303" />
</div>
<div id="rotating-item-wrapper2">
  <img src="images/inicio_mini02_01.jpg" alt="photo of building across from our office" class="rotating-item" width="308" height="303" />
  <img src="images/inicio_mini02_02.jpg" alt="building entrance with neon backlit walls" class="rotating-item" width="308" height="303" />
</div>
<div id="rotating-item-wrapper3">
  <img src="images/inicio_mini03_01.jpg" alt="photo of building across from our office" class="rotating-item" width="308" height="303" />
  <img src="images/inicio_mini03_02.jpg" alt="building entrance with neon backlit walls" class="rotating-item" width="308" height="303" />
</div>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1'></script>
<script type='text/javascript' src='scripts/infinite-rotator.js'></script>

JAVASCRIPT では:

$(window).load(function () { //start after HTML, images have loaded

  var InfiniteRotator = {
    init: function () {
      //initial fade-in time (in milliseconds)
      var initialFadeIn = 1000;
      //interval between items (in milliseconds)
      var itemInterval = 5000;
      //cross-fade time (in milliseconds)
      var fadeTime = 2500;
      //count number of items
      var numberOfItems = $('.rotating-item').length;
      //set current item
      var currentItem = 0;
      //show first item
      $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

      //loop through the items      
      var infiniteLoop = setInterval(function () {
        $('.rotating-item').eq(currentItem).fadeOut(fadeTime);

        if (currentItem == numberOfItems - 1) {
          currentItem = 0;
        } else {
          currentItem++;
        }
        $('.rotating-item').eq(currentItem).fadeIn(fadeTime);

      }, itemInterval);
    }
  };
  InfiniteRotator.init();
});