在同一頁中添加jQuery圖像旋轉器三次（每個使用不同的圖像）

Question

我需要在我的頁面插入3 jQuery圖像旋轉器（infinite-rotator.js）。每個人將顯示 不同的圖像，但所有畫廊將具有相同的功能。

我已經做了3個div每一個ID。三個畫廊的工作，但不是同時進行。 當第一個圖庫圖像結束時，會顯示第二個圖庫圖像。當這些圖像結束時，第三個畫廊開始。 我需要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(); 
}); 

Answer 1

更改您的JS這個標記：

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

    var InfiniteRotator = { 
     init: function ($elem) { 
      //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 = $elem.find('.rotating-item').length; 
      //set current item 
      var currentItem = 0; 
      //show first item 
      $elem.find('.rotating-item').eq(currentItem).fadeIn(initialFadeIn); 

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

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

      }, itemInterval); 
     } 
    }; 

    $('.rotating-item-wrapper').each(function(idx, elem){ 
     InfiniteRotator.init($(elem)); 
    }); 

}); 

與其說init只有一次的，我使用jQuery函數來運行每個發生的函數類別rotating-item-wrapper。
另一個重要的技巧是將相應的元素作爲屬性移交給init函數。

$('.rotating-item-wrapper').each(function(idx, elem){ 
     InfiniteRotator.init($(elem)); 
    }); 

正如你所看到的，我也改變了函數體，取而代之的每一次出現：$('.rotating-item')與$elem.find('.rotating-item')旋轉器來區分。

此外，而不是在您的包裝不同的ID，最好是使用一個類（在我的例子中，我使用的：rotating-item-wrapper，你需要改變這種狀況，也爲例子來工作！）。