0

我有自己创建的 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>

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

提前致谢。

4

2 回答 2

0

尝试使用.stopPropagation()

$("#my_ul").mouseover(function(event) { 
        event.stopPropagation();        
    });
于 2013-07-16T07:57:23.323 回答
0

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

于 2013-07-16T08:01:46.453 回答