如何使mouseenter功能循環

Question

我想做一個功能，如果用戶將光標懸停在圖像上，圖像會改變並循環顯示一系列我指定的圖像。我之前已經實現了這一點，但不是在懸停時，我使用了點擊，這相當容易。

總之，如何在mouseenter上製作圖像循環？

我的代碼：

var n = 0; 

var images = ["3.jpeg","4.jpeg","6.jpeg","7.jpeg","8.jpeg","10.jpeg","12.jpeg","13.jpeg","14.jpeg","15.jpeg","16.jpeg"]; 

var image = $('#himg'); 

image.on('mouseenter', function change() { 

    var newN = n+1; 

    if (newN >= images.length) { newN = 0 }; 

    image.attr('src', images[n]); 

    image.fadeOut(200, function() { 
     image.attr('src', images[newN]); 
     image.fadeIn(); 
     n = newN; 
    }); 
}); 

Answer 1

mouseenter僅觸發一次，當鼠標移動到DOM元素的範圍內。當鼠標終於離開時，會觸發一個mouseleave事件。你可以用它來開始一個間隔來循環你的圖像。

var n = 0; 

var images = ["3.jpeg","4.jpeg","6.jpeg","7.jpeg","8.jpeg","10.jpeg","12.jpeg","13.jpeg","14.jpeg","15.jpeg","16.jpeg"]; 

var image = $('#himg'); 

var intervalId; 
var intervalTimeout = 200; 

image.on('mouseenter', function change() { 
    intervalId = setInterval(function() { 
     var newN = n+1; 

     if (newN >= images.length) { newN = 0 }; 

     image.attr('src', images[n]); 

     image.fadeOut(200, function() { 
      image.attr('src', images[newN]); 
      image.fadeIn(); 
      n = newN; 
     }); 
    }, intervalTimeout); 
}); 

image.on('mouseleave', function() { 
    clearInterval(intervalId); 
});