Question

我有一个幻灯片动画页面。在我第一次在此页面上移动鼠标后，每次滑动功能运行时都会触发mousemove事件，即使滑动功能中没有任何引用鼠标的内容也是如此。如果我只运行一次幻灯片而不是循环，它可以正常工作。或者，如果我在循环中运行幻灯片但根本不触摸鼠标，则幻灯片循环也不会错误地触发任何mousemove事件。问题是当幻灯片自动循环并且我已经移动鼠标一次。

像这样的幻灯片功能在循环中运行：

function slide(id) {
    $(“.thumb”).addClass(“inactive”);
    $(".thumb:nth-of-type("+(id+1)+")").addClass("active");

    $(“.thumb-container”).animate({ marginLeft: '-'+nextPos+'px' }, {
        duration: 500, 
        easing: "easeOutCubic", 
        complete: function() {
            console.log(“anim done”);
        }
    });
}


setInterval(function() { slide(id++); }, 200);

然后，在函数之外：

$(document).mousemove(function(event) {
    console.log("mouse moving");    
});

更新：奇怪，当我从幻灯片功能中注释掉以下内容时，此问题已得到解决：

$(".thumbnails .thumb:nth-of-type("+(lastSlide+1)+")").removeClass("active-thumb");
$(".thumbnails .thumb:nth-of-type("+(lastSlide+1)+") .inactive-overlay").fadeIn(300);
$(".thumbnails .thumb:nth-of-type("+(id+1)+")").addClass("active-thumb");
$(".thumbnails .thumb:nth-of-type("+(id+1)+") .inactive-overlay").fadeOut(300);

更新：已解决！这是因为类.active-thumb正在使用：

cursor: default;

每次幻灯片更改时，jquery .mousemove都会触发

0 个答案: