視頻滾動效果僅適用於特定圖像

Question

有100幀，直到第28幀。當您使用鼠標滾輪時會發生這種情況。

但是，如果您嘗試使用滾動條並關閉，則可以看到該數值爲100幀。

如何讓鼠標滾輪以同樣的方式工作？我注意到每個滾動都是100px上下，這意味着每100個像素將顯示1幀。

如何修改我的代碼以使其順利工作？

這裏是我的代碼，這裏的jsfiddle：

var counter = 0; 
var scrollArray = []; // array that will have 2 top positions to compare with to see if it is scrolling up or down 

$(window).scroll(function() {   
    var top = $(this).scrollTop();  
    if(top > 1 && top < 13000) { // where I want the video to start playing    
     scrollArray.push(top); // pushes values into the array  
     // conditional for keeping 2 values in the array    
     if(scrollArray.length > 1) { 
      if(scrollArray[0] < scrollArray[1]) { // 
       counter++; 
      } 
      else { 
       counter--; 
      } 
      scrollArray = [];    
     } 
     else {   
      var addCeros = (4 - String(counter).length); 

      if(counter <= 100 && counter >= 1) { 
       var numPic = ''; 
       for (var i = 0; i < addCeros; i++) { 
        numPic += '0'; 
       } 
       numPic += counter; 
       $('#slide2 img').attr('src', 'http://360langstrasse.sf.tv/tutorial/shared/street/vid-'+numPic+'.jpg'); 
       $('#slide2 span').text('http://360langstrasse.sf.tv/tutorial/shared/street/vid-'+numPic+'.jpg'); 
      }     
     } 
    }   
}); 

Answer 1

window.onscroll真的激發了很多事件，所以你需要阻止它更新圖像。如果你看看螢幕的網絡面板，你可以看到很多中止的圖像請求。
節流意味着您需要允許用戶跳過幀。所以我重寫了你的處理程序以配合當前的滾動百分比。

http://jsfiddle.net/29qL7/1/

var debounceTimer, 
    throttleTimestamp = 0; 

function throttleScroll() { 
    var dur = 100; 
    clearTimeout(debounceTimer); 
    if (+new Date - throttleTimestamp > dur) { 
     showSlide(); 
     throttleTimestamp = +new Date; 
    } else { 
     debounceTimer = setTimeout(function() { 
      showSlide(); 
      throttleTimestamp = +new Date; 
     }, dur); 
    } 
} 

function showSlide() { 

    var scrollTop = $(window).scrollTop(), 
     docHeight = $(document).height(), 
     winHeight = $(window).height(), 
     scrollPercent = Math.ceil((scrollTop/(docHeight - winHeight)) * 100), 
     fileName = "00"+scrollPercent; 

    if(scrollPercent<10)fileName = "000"+scrollPercent; 
    if(scrollPercent==100)fileName = "0"+scrollPercent; 
    if(scrollTop>0){ 
     $('#slide2 img').attr('src', 'http://360langstrasse.sf.tv/tutorial/shared/street/vid-' + fileName + '.jpg'); 
    } 

} 

$(window).scroll(throttleScroll);