JQuery更改鼠標懸停的圖像

Question

我有以下的jquery代碼我有兩個問題，請幫助。提前致謝。

這段代碼做了什麼？ 在鼠標懸停（即圖像）上更改圖像（圖像幀不斷變化，產生遊戲效果或視頻效果1-100）

問題？ 1）我想運行這個按鈕懸停，即#btn-forward轉發& #btn-back回來，但它不工作按鈕奇怪的原因，我不知道（我剛剛處理向前移動只有在代碼）請幫助。 2）我想創建斷點後每隔10幀用戶停止顯示一些鏈接等，並可以繼續從那一點。 3）這不正常運行的任何建議嗎？

注：如果我不清楚不要讓我知道...謝謝

$(document).ready(function() { 
    var images = []; 

    images[0] = "img/1.jpg"; 
    images[1] = "img/2.jpg"; 
    images[2] = "img/3.jpg"; 
    images[3] = "img/4.jpg"; 
    images[4] = "img/5.jpg"; 
    images[5] = "img/6.jpg"; 
    images[6] = "img/7.jpg"; 
    images[7] = "img/8.jpg"; 
    images[8] = "img/9.jpg"; 
    images[9] = "img/10.jpg"; 

    images[10] = "img/11.jpg"; 
    images[11] = "img/12.jpg"; 
    images[12] = "img/13.jpg"; 
    images[13] = "img/14.jpg"; 
    images[14] = "img/15.jpg"; 
    images[15] = "img/16.jpg"; 
    images[16] = "img/17.jpg"; 
    images[17] = "img/18.jpg"; 
    images[18] = "img/19.jpg"; 
    images[19] = "img/20.jpg"; 

    images[20] = "img/21.jpg"; 
    images[21] = "img/22.jpg"; 
    images[22] = "img/23.jpg"; 
    images[23] = "img/24.jpg"; 
    images[24] = "img/25.jpg"; 
    images[25] = "img/26.jpg"; 
    images[26] = "img/27.jpg"; 
    images[27] = "img/28.jpg"; 
    images[28] = "img/29.jpg"; 
    images[29] = "img/30.jpg"; 

    images[30] = "img/31.jpg"; 
    images[31] = "img/32.jpg"; 
    images[32] = "img/33.jpg"; 
    images[33] = "img/34.jpg"; 
    images[34] = "img/35.jpg"; 
    images[35] = "img/36.jpg"; 
    images[36] = "img/37.jpg"; 
    images[37] = "img/38.jpg"; 
    images[38] = "img/39.jpg"; 
    images[39] = "img/40.jpg"; 

    images[40] = "img/41.jpg"; 
    images[41] = "img/42.jpg"; 
    images[42] = "img/43.jpg"; 
    images[43] = "img/44.jpg"; 
    images[44] = "img/45.jpg"; 
    images[45] = "img/46.jpg"; 
    images[46] = "img/47.jpg"; 
    images[47] = "img/48.jpg"; 
    images[48] = "img/49.jpg"; 
    images[49] = "img/50.jpg"; 

    images[50] = "img/51.jpg"; 
    images[51] = "img/52.jpg"; 
    images[52] = "img/53.jpg"; 
    images[53] = "img/54.jpg"; 
    images[54] = "img/55.jpg"; 
    images[55] = "img/56.jpg"; 
    images[56] = "img/57.jpg"; 
    images[57] = "img/58.jpg"; 
    images[58] = "img/59.jpg"; 
    images[59] = "img/60.jpg"; 

    images[60] = "img/61.jpg"; 
    images[61] = "img/62.jpg"; 
    images[62] = "img/63.jpg"; 
    images[63] = "img/64.jpg"; 
    images[64] = "img/65.jpg"; 
    images[65] = "img/66.jpg"; 
    images[66] = "img/67.jpg"; 
    images[67] = "img/68.jpg"; 
    images[68] = "img/69.jpg"; 
    images[69] = "img/70.jpg"; 

    images[70] = "img/71.jpg"; 
    images[71] = "img/72.jpg"; 
    images[72] = "img/73.jpg"; 
    images[73] = "img/74.jpg"; 
    images[74] = "img/75.jpg"; 
    images[75] = "img/76.jpg"; 
    images[76] = "img/77.jpg"; 
    images[77] = "img/78.jpg"; 
    images[78] = "img/79.jpg"; 
    images[79] = "img/80.jpg"; 

    images[80] = "img/81.jpg"; 
    images[81] = "img/82.jpg"; 
    images[82] = "img/83.jpg"; 
    images[83] = "img/84.jpg"; 
    images[84] = "img/85.jpg"; 
    images[85] = "img/86.jpg"; 
    images[86] = "img/87.jpg"; 
    images[87] = "img/88.jpg"; 
    images[88] = "img/89.jpg"; 
    images[89] = "img/90.jpg"; 

    images[90] = "img/91.jpg"; 
    images[91] = "img/92.jpg"; 
    images[92] = "img/93.jpg"; 
    images[93] = "img/94.jpg"; 
    images[94] = "img/95.jpg"; 
    images[95] = "img/96.jpg"; 
    images[96] = "img/97.jpg"; 
    images[97] = "img/98.jpg"; 
    images[98] = "img/99.jpg"; 
    images[99] = "img/100.jpg"; 
    images[100] = "img/101.jpg";  

    var loop; 
    var i = 0; 

    var counter = $("#counter"); 

    $('.video-thumb img, #btn-forward').mouseover(function() { 
     var image = this; 
     loop = setInterval(function() { 

      if (i < images.length - 1) { 
       i++; 
       $(image).attr('src',images[i]); 
      } else { 
       i = 0; 
       $(image).attr('src',images[i]); 
      } 
      counter.html(i); 
     }, 100); 

    }).mouseout(function() { 
     clearInterval(loop); 
     /*i = 0;*/ 
     $(this).attr('src', images[i]); 
     counter.html(i); 
    }); 

}); 

</script> 


</head> 

<body> 
<div class="video-thumb"> 
    <img src="img/1.jpg" /> 
</div> 
<input type="submit" id="btn-forward" value="Forward" /> 
<input type="submit" id="btn-back" value="Back" /> 
<div id="counter">0</div> 
</body> 
</html> 

Answer 1

你會做到這一點，像這樣：

$(document).ready(function() { 
    var images = 100, // number of images 
     loop, 
     i = 0; 

    $('#btn-forward, #btn-back').on({ 
     mouseenter: function(e) { 
      i = parseInt($('.video-thumb img').prop('src').replace(/\D+/,''), 10); 
      loop = setInterval(function() { 
       i = e.target.id == 'btn-forward' ? (i>images?1:i+1) : (i<2?(images+1):i-1); 
       $('.video-thumb img').prop('src', 'img/'+(i)+'.jpg'); 
       $('#counter').text(i); 
      }, 100); 
     }, 
     mouseleave: function() { 
      clearInterval(loop) 
     } 
    }); 
}); 

FIDDLE

陣列時並不需要，你可以使用一個遞增變量代替。

另請注意，您使用forword和forward作爲ID和選擇器，您需要決定它是哪一個！

編輯：

預加載所有圖像，你可以添加一個小預壓環：

$(document).ready(function() { 
    var images = 100, 
     loop, 
     i = 0; 

    for(var j=1; j<102; j++) { 
     var img = new Image(); 
     img.src = 'img/'+j+'.jpg' 
    } 

    $('#btn-forward, #btn-back').on({ 
     mouseenter: function(e) { 
      i = parseInt($('.video-thumb img').prop('src').replace(/\D+/,''), 10); 
      loop = setInterval(function() { 
       i = e.target.id == 'btn-forward' ? (i>images?1:i+1) : (i<2?(images+1):i-1); 
       $('.video-thumb img').prop('src', 'img/'+(i)+'.jpg'); 
       $('#counter').text(i); 
       console.log(i) 
      }, 100); 
     }, 
     mouseleave: function() { 
      clearInterval(loop) 
     } 
    }); 
}); 

Answer 2

嗯，這是你將如何通過數組循環：

<script> 

    var num = 100; 

    for(var i = 0; i <= num; i++){ 
     console.log("inc : " + i); 
    } 


    for(var k = num ; k >= 0; k--) { 
     console.log("dec : " + k); 
    } 

</script> 

第一循環increments，並第二屆一個decrements