1

我有一个幻灯片动画页面。在我第一次在此页面上移动鼠标后，每次滑动函数运行时都会触发 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;
4

0 回答 0