使用jquery循環通過div中的兒童和動畫

Question

我想創建一個使用jquery的連續滾動圖像滑塊。這是盡我所能。我不太明白如何傳遞函數參數，尤其是當我使用this時。這個想法是開始一個動畫，並將圖像從一個div的外部移動到另一個視圖的外部，然後重新設置其位置。接下來的圖片將在其之前的圖片通過起點之後立即開始動畫，等等。 （我想通了速度爲250像素/秒，因此當前元素的除以250的寬度應該給我的時候，我應該等待啓動下一個動畫，我覺得...）

<div class="slideshow" style="position: absolute; top: 220px;left: 50%; margin-left: -700px;height: 600px; width: 1400px; z-index: 2;"> 
    <img src="img2.jpg" id="img2" class="slideshowImages"> 
    <img src="img3.jpg" id="img3" class="slideshowImages"> 
    <img src="img4.jpg" id="img4" class="slideshowImages"> 
    <img src="img1.jpg" id="img1" class="slideshowImages"> 
</div> 

    </body> 
    <script> 
     $(document).ready(setTimeout(function() { 
      var InfiniteRotator = 
      { 
       init: function(ident, time) 
       { 
        $(ident).animate({"margin-left": "-=2500"},{ duration:10000,easing: 'linear',queue:false, complete:function(){ 
        $(ident).css("margin-left", "1400px"); 
        } 
         // Animation complete. 
        }).delay(time); 
       } 

      } 
      var time = 0; 
      $('div.slideshow').each(function(){ 

       InfiniteRotator.init(this, time); 
       time = $(this).width()/250; 
      }); 
     }, 3000)); 

    </script> 

Answer 1

$('div.slideshow')指一個元素（包含你的圖像的div），所以調用each就不會像你的代碼似的假設那樣遍歷你的圖像。

$('div.slideshow img').each(function(){ 
    InfiniteRotator.init(this, time); 
    time = $(this).width()/250; 
}); 

在這種改變的版本，this指當前圖像元素（一個很好的快捷方式的jQuery用品）。此代碼做同樣的事情：

$('div.slideshow img').each(function(index, element){ 
    InfiniteRotator.init(element, time); 
    time = $(this).width()/250; 
}); 

如果你想「像jQuery的」，讓你的InfiniteRotator訪問使用this當前圖像，你可以使用call或apply而不是直接調用你的init方法和通作爲上下文的元素（this在被調用的函數中引用的內容）：

$('div.slideshow img').each(function(index, element){ 
    InfiniteRotator.init.call(element, element, time); 
    time = $(this).width()/250; 
}); 

var InfiniteRotator = 
{ 
    init: function(ident, time) 
    { 
     $(this).animate({"margin-left": "-=2500"}, { 
     duration:10000, 
     easing: 'linear', 
     queue:false, 
     complete:function(){ 
      $(this).css("margin-left", "1400px"); 
     } 
     }).delay(time); 
    } 
}