Question

我有自己创建的jquery滑块，它滑动得非常好。滑块的代码如下：

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var show_items = 3;
    for(var i=1; i<=show_items; i++)
    {
        $('#my_ul li:nth-child('+i+')').show();
    }
    function fade()
    {
        $('#my_ul li:first').delay(2000).animate({opacity: 0.2, width: "toggle"}, 1500);
    }
    fade();
    setInterval(function()
    {
        var last = $('#my_ul li:first').html();
        $('#my_ul li:first').remove();
        $('#my_ul').append('<li>'+last+'</li>');
        $('#my_ul li:nth-child('+show_items+')').fadeIn(1500);
        fade();
    }, 3500);

    $("#my_ul").mouseover(function() { 
        $(this).stop();
        return false;
    }); 

});


</script>
<style type="text/css">
#my_ul li
{
    list-style: none;
    width: 205px;
    height: 200px;
    float: left;
    display: none;
}
</style>
</head>
<body>
<ul id="my_ul">
<li>
<div style="background-color: red; width: 200px; height: 200px; float: left; margin-left: 5px;"></div>
</li>
<li>
<div style="background-color: blue; width: 200px; height: 200px; float: left; margin-left: 5px;"></div>
</li>
<li>
<div style="background-color: green; width: 200px; height: 200px; float: left; margin-left: 5px;"></div>
</li>
<li>
<div style="background-color: yellow; width: 200px; height: 200px; float: left; margin-left: 5px;"></div>
</li>
<li>
<div style="background-color: orange; width: 200px; height: 200px; float: left; margin-left: 5px;"></div>
</li>
</ul>
</body>
</html>

但是我想在鼠标悬停时停止或暂停滑块。我用来停止或暂停的代码不起作用。请帮我解决一下。

提前致谢。

Answer 1

尝试使用.stopPropagation()

$("#my_ul").mouseover(function(event) { 
        event.stopPropagation();        
    });

Answer 2

您使用间隔作为主要功能，因此必须使用clearInterval方法停止该间隔。此函数的预期参数是setInterval返回的区间ID。然后，在mouseout上，您必须再次创建间隔。

如何在查询中停止鼠标悬停功能？

2 个答案: