在同一頁面中添加jquery圖像旋轉器3次（每次使用不同的圖像）

Question

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

我已經完成了3個div，每個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 ，您也需要對其進行更改，示例才能起作用！）。