Add jquery image rotator three times (each one using differents images) in the same page
<p>I need insert 3 jquery image rotator (infinite-rotator.js) at my page. Each one will show
different images but all galleries will have same function.</p>

<p>I've done 3 divs each one with an ID. Three galleries work but not simultaneously.
When first gallery images are over, second gallery images appear. And when these images are over, third gallery starts.
I need 3 galleries start at same time and run independently of each other.</p>

<p>I'm a beginner, so if someone could help me I'd apreciate.</p>

<p>HTML code:</p>

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

<p>In JAVASCRIPT:</p>

<pre><code>$(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();
});
</code></pre>
