如何在jQuery中創建旋轉的縮略圖功能？

Question

基本上我需要縮略圖來旋轉每次用戶懸停在圖像上。這是我的失敗嘗試：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 

     $('img').hover(function() { 

      theImage = $(this).attr('id'); 
      otherImages = $(this).attr('class').split('@'); 
      rotateThumbs(otherImages, theImage); 

     }, function() { 
      // 
     }); 

    }); 

    function rotateThumbs(otherImages, theImage) { 

     for (i=0; i < otherImages.length; i++) { 
      setInterval($('#'+theImage).attr('src', otherImages[i]), 1000); 
     } 

    } 
</script> 

<img id="myImage" src="http://www.google.com/images/logos/ps_logo2.png" class="http://www.google.com/images/logos/ps_logo2.png@http://l.yimg.com/a/i/ww/met/yahoo_logo_us_061509.png@http://dogandcat.com/images/cat2.jpg" width="174" height="130" /> 

有沒有人知道這可能是如何完成的？

Answer 1

這裏有一些問題。

1. setInterval需要函數引用，因爲它是第一個參數，但是您正在執行返回jQuery對象的代碼。
2. setInterval以指定的時間間隔重複執行第一個函數。那是你正在嘗試做什麼？每秒交換圖像？
3. 根據您更正第一個問題的方式，可能會遇到i爲otherImages.length，因此src設置爲undefined的問題。
4. 假設您解決了第3個問題，您將遇到圖像交換快速難以察覺的問題，並且顯示爲最後一個圖像始終顯示。

相反，不要使用循環。每次顯示新圖像時增加計數器。試試這個：

function rotateThumbs(otherImages, theImage) { 
    var i = 0; 
    var interval = setInterval(function() { 
     $('#'+theImage).attr('src', otherImages[i++]); 
     if (i >= otherImages.length) { 
      clearInterval(interval); 
     } 
    }, 1000); 
} 

Answer 2

我已經實施了fully-functional example here。這解決了一些問題，那@ gilly3筆記，但使用倒閉，而不是一個遞增的計數器來跟蹤當前圖像的：

$(function() { 

    $('img').hover(function() { 
     // declaring these variables here will preserve 
     // the references in the function called by setInterval 
     var $img = $(this), 
      imageList = $img.attr('class').split('@'), 
      intervalId; 
     // start the cycle 
     intervalId = window.setInterval(function() { 
      var next = imageList.pop(); 
      if (next) { 
       $img.attr('src', next); 
      } else { 
       // stop the cycle 
       intervalId = window.clearInterval(intervalId); 
      } 
     }, 1000); 
    }, function() {}); 

}); 

正如你所看到的，使用一個封閉更容易，當你聲明函數以內聯方式傳遞給setInterval，而不是作爲單獨的命名函數。如果需要，您仍可以使用rotateThumbs函數，但您可能需要做更多工作以確保變量正確傳遞。

編輯：我做了一個updated version，只要鼠標懸停，它就會繼續循環。

Answer 3

我已經調整了Sam的答案，將圖像預先加載考慮在內，這樣在第一次旋轉時就不會有可能的失誤。

function rotateThumbs(otherImages, theImage) { 
     if(!$('#'+theImage).data('setup')){ 
      $('#'+theImage).data('setup', true); // do not double pre-loading images 
      var $body = $('body'); 
      for(var j = 0; j < otherImages.length; j++){ 
       $body.append($('<img/>').attr('src', otherImages[j]) 
       .css('display', 'none')); 
      } 
     } 
     var i= 0; 
     setInterval(function(){ 
      $('#'+theImage).attr('src', otherImages[i++]); 
      if(i >= otherImages.length){i = 0} 
     }, 1000); 
}