鼠標懸停時的滾動圖像

Question

我試圖做一個腳本來滾動一組五個不同的圖像，當鼠標懸停時。類似於fb畫廊。

這是我的嘗試：

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".collectionThumb").mouseenter(function(){ 
     var rotator = JSON.parse('<?php echo json_encode($rotateCollectionPics)?>'); 
     /* 
     rotator := 
      Object {1: Array[5], 2: Array[5]} 
       1: Array[5] 
       0: "/images/picture_gallery/779cfee29cdd-img-5529.thumb.jpg" 
       1: "/images/picture_gallery/43f561c548e6-img-5522.thumb.jpg" 
       2: "/images/picture_gallery/28c56302e920-img-5527.thumb.jpg" 
       3: "/images/picture_gallery/1a57472c9edf-img-5523.thumb.jpg" 
       4: "/images/picture_gallery/0323ab8eb12c-img-5524.thumb.jpg" 
       length: 5 
       __proto__: Array[0] 
       2: Array[5] 
       0: "/images/picture_gallery/f340c8840241-img-5535.thumb.jpg" 
       1: "/images/picture_gallery/859ae8584caf-img-5541.thumb.jpg" 
       2: "/images/picture_gallery/f340c8840241-img-5535.thumb.jpg" 
       3: "/images/picture_gallery/1522b44b2de8-img-5546.thumb.jpg" 
       4: "/images/picture_gallery/ee1d7402c73f-img-5549.thumb.jpg" 
       length: 5 
       __proto__: Array[0] 
       __proto__: Object 
     */ 
     var collectionid = $(this).data('collectionid'); 
     for (var i = 0; i < rotator[collectionid].length; i++) { 
      // get src for the next thumbnail to show 
      var nextThumb = rotator[collectionid][i]; 
      replaceCollectionThumb(nextThumb, collectionid); 
     } 
    }); 
}); 

function replaceCollectionThumb(el, collectionid) { 
    setTimeout(function() { replaceThumb(el, collectionid); }, 1000); 
} 
function replaceThumb(el, collectionid) { 
    //console.log(el); 
    $(".collectionThumb").each(function(i, v){ 
     if (collectionid == $(v).data('collectionid')) { 
      //console.log($(v).data('collectionid')); 
      var img = loadImage(el, 'title'); 
      $(v).children('img').remove(); 
      $(v).append(img.imgObj); 
     } 
    }); 
} 
function loadImage(path, imgTitle, width, height) { 
    if (undefined == width) width = 'auto'; 
    if (undefined == height) height = 'auto'; 
    var imgWidth; 
    var imgHeight; 
    var img = new Image(); 

    $(img).load(function() { 
     $(this).width(width).height(height); 
     imgWidth = $(this).width; 
     imgHeight = $(this).height; 
    }); 
    img.src = path; 
    img.alt = imgTitle; 

    var obj = new Object(); 
    obj.imgObj = img; 
    obj.width = imgWidth; 
    obj.height = imgHeight; 

    return obj; 
} 
</script> 

我要去尋找現有的解決方案，但我想了解我失蹤使它工作。

現在發生的事情是在所有超時發生之後，圖像被替換，但是圖像本身是相同的。

我想知道什麼時候超時回調結束，刷新圖像，等待一秒鐘後，做以下的一樣，但我看到我有一個誤解它是如何工作的。 ？

幫助/意見¿

Answer 1

在這種情況下有人在這裏尋找類似的東西是我的解決方案：

<script type="text/javascript"> 
$(document).ready(function(){ 
    var indx = 0, numberOfFeatures = 4; 
    var rotator = JSON.parse('<?php echo json_encode($rotateCollectionPics)?>'); 
    var currentCollection = 1; 
    var run = false; 
    function imageRotate(){ 
     if (run) { 
      indx++; 
      if (indx > numberOfFeatures) { indx = 0; } 
      var nextThumb = rotator[currentCollection][indx]; 
      var collectionSelector = 'collectionThumb-' + currentCollection; 
      $('#'+collectionSelector+' img').attr('src',nextThumb); 
      setTimeout(imageRotate , 800); 
     } 
    } 

    $(".collectionThumb").mouseenter(function(){ 
     currentCollection = $(this).data('collectionid'); 
     run = true; 
     imageRotate(); 
    }); 

    $(".collectionThumb").mouseleave(function(){ 
     run = false; 
     imageRotate(); 
    }); 
}); 

</script> 

因爲在過渡奇怪behavieur，我已經搬到requestAnimationFrame方法。這是我的最終解決方案：

<script type="text/javascript"> 
$(document).ready(function(){ 
    var indx = 1; 
    var rotator = JSON.parse('<?php echo json_encode($rotateCollectionPics)?>'); 
    var currentCollection = 1; 
    var run = false; 

    var globalID; 
    var fps = 2; 

    function photoRollover(){ 
     if (run) { 
      setTimeout(function() { 
       var numberOfFeatures = rotator[currentCollection].length - 1; 
       if (indx > numberOfFeatures) { indx = 0; } 
       var nextThumb = rotator[currentCollection][indx]; 
       var collectionSelector = 'collectionThumb-' + currentCollection; 

       $('#'+collectionSelector+' img').attr('src',nextThumb); 
       indx++; 

       globalID = requestAnimationFrame(photoRollover); 

      }, 3000/fps); 
     } 
    } 

    $(".collectionThumb").mouseenter(function(){ 
     run = true; 
     currentCollection = $(this).data('collectionid'); 
     var collectionSelector = 'collectionThumb-' + currentCollection; 
     var nextThumb = rotator[currentCollection][indx]; 
     $('#'+collectionSelector+' img').attr('src',nextThumb); 
     indx++; 
     globalID = requestAnimationFrame(photoRollover); 
    }); 

    $(".collectionThumb").mouseleave(function(){ 
     run = false; 
     cancelAnimationFrame(globalID); 
    }); 

}); 

</script>