Javascript 鼠标退出时如何停止鼠标输入功能

这是我用于滑块的代码

    jQuery(document).ready(function ($) {

    setInterval(function () {
        moveRight();
    }, 1000);

    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;

    $('#slider').css({ width: slideWidth, height: slideHeight });

    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };


    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });

});    

我试着创建一个函数，使幻灯片在悬停时播放得更慢，并返回到正常状态，为什么光标离开了它。这是我的密码

 function moveNot() {
            $('#slider ul').animate({
                left: - slideWidth
            }, 20000, function () {
                $('#slider ul li:first-child').appendTo('#slider ul');
                $('#slider ul').css('left', '');
            });
        };



        $('#slider').mouseover(function () {

            moveNot();

        });

        $('#slider').mouseout(function () {

            setInterval(function () {
            moveRight();
        }, 1000);

        });

我能够使滑块变慢，但是mouseout或mouseleave（尝试了两者）不起作用，我不知道还能做什么

---

当鼠标关闭时，如何在悬停时停止滑块并使滑块移动？

您的代码的一个明显问题是

mouseout

功能，它会重复

setInterval

。请注意，如果希望函数停止运行，则需要调用

clearInterval（）

以“取消注册”该函数

回答你的问题

当鼠标关闭时，如何在悬停时停止滑块并使滑块移动

您可以尝试以下方法：

var myVar;  // rename it to something makes sense to you

$('#slider').mouseover(function(){
    clearInterval(myVar);
});

$('#slider').mouseout(function (){
    myVar = setInterval(function(){
        moveRight();
    }, 1000);
});

---

查看

clearInterval

函数。

在执行任何操作之前，您应该将

setInterval

添加到变量中，并且可以在再次调用同一函数之前使用

clearInterval（）

清除它。我想你应该在特定函数中把时间作为参数来传递：

jQuery（文档）.ready（函数（$）{
var时间，
callRight=函数（时间）{
时间=设置间隔（函数（）{
移动权（时间）；
}，时间）；
};
callRight（200）；//使用鼠标盖代替鼠标盖和鼠标出

$('#slider').hover(function(){
    moveNot()
    },function () {
        setInterval(function(){
            moveRight()
    }, 1000)
});

请尝试以下代码



jQuery（文档）.ready（函数（$）{
var slidetime=500；
变量t；
$（'#slider li'）。on（'mouseout'，function（）{
滑动时间=500；
净间隔（t）；
startAnimation（）；
}); 
$（'#slider li'）。on（'mouseenter'，function（）{
//slidetime=1000；如果要使其变慢，请取消注释
净间隔（t）；
//startAnimation（）；如果要使其变慢，请取消注释
});
函数startAnimation（）{
t=设置间隔（函数（）{
moveRight（）；
}，幻灯片时间）；
}
startAnimation（）；
var slideCount=$（'#slider ul li'）。长度；
var slideWidth=$（'#slider ul li'）.width（）；
var slideHeight=$（'#slider ul li'）.height（）；
var sliderUlWidth=slideCount*slideWidth；
$（'#slider'）.css（{宽度：slideWidth，高度：slideHeight}）；
$（'#slider ul'）.css（{width:sliderUlWidth，marginLeft:-slideWidth}）；
$（“#slider ul li:last child”）.prependTo（“#slider ul”）；
函数moveLeft（）{
$（'#滑块ul'）。设置动画({
左：+slideWidth
}，幻灯片时间，函数（）{
$（“#slider ul li:last child”）.prependTo（“#slider ul”）；
$（'#滑块ul'）.css（'左'，''）；
});
};
函数moveRight（）{
$（'#滑块ul'）。设置动画({
左：-滑动方向
}，幻灯片时间，函数（）{
$（“#slider ul li:first child”）。附加到（“#slider ul”）；
$（'#滑块ul'）.css（'左'，''）；
});
};
})；
li{
宽度：100px；
高度：100px；
浮动：左；
显示：块；
}
第n个孩子（偶数）{
背景：红色；
}
第n个孩子（单数）{
背景：黑色；
颜色：红色；
}
保险商实验室{
显示：内联flex；
}
#滑块{
宽度：100px；
溢出：隐藏；
}


一,
二,
三,
四,
五,
六,

我添加了你的第一段代码。然后剩下的代码就放在了它应该放的地方，它运行得非常快，而且不会停止。我的朋友，你帮了我很多。谢谢！
$('#slider').hover(function(){
    moveNot()
    },function () {
        setInterval(function(){
            moveRight()
    }, 1000)
});