Question

我想制作一个功能，如果用户将光标悬停在图像上，图像就会改变并循环显示我指定的一堆图像。我之前已经实现了这一点，但是我没有使用悬停，而是使用了点击，这相当容易。

简而言之，如何让图像在鼠标中心循环？

我的代码：

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

当鼠标移动到dom元素的范围内时，

mouseenter仅触发一次。当鼠标最终离开时，会触发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);
});

如何使mouseenter函数循环

1 个答案: