0

我正在尝试制作图像滑块。现在，我得到了滑块的基本部分——唯一的事情是滑块每 5 秒自动显示一张新图片（已经构建）但是一旦用户悬停滑块菜单，5 秒计时器就不会停止.

这是我的滑块代码；

var index = $(this).parent("li").index();

        var item_y = $(this).parent("li").offset().top;
        var item_x = $(this).parent("li").offset().left;

        $("#slider li a").each(function(){
            $(this).removeClass("active");
            Cufon.refresh();
        });

        $(this).addClass("active");

        $("#slider_arrow").css({
            'top' : item_y,
            'left' : item_x-109
        });

        $("#slider_image li").hide().each(function(i,v){
            if (i == index) {
                $(this).fadeIn("medium");
            }
        });

        Cufon.refresh();

这实际上是 - 悬停 - 动作。以下是每 5 秒发生一次的操作的代码。

setInterval(function(){

        var current_index = $("#slider li a.active").parent("li").index();

        var new_index = $("#slider li").eq((current_index+1));

        if (new_index.length > 0)
        {
            new_index.children("a").mouseover();
        }
        else
        {
            $("#slider li:first-child").children("a").mouseover();
        }

    }, 5000);

所以我想要的是一旦用户从#slider li菜单中触摸一个项目就重置 5 秒的间隔。

我怎样才能做到这一点？

谢谢

4

2 回答 2

0

查看此答案以了解如何创建可暂停的 javascript timeout。

它应该运作良好。

于 2012-04-18T10:01:37.913 回答
0

您必须存储间隔句柄，以便clearInterval()在需要时调用。

var myinterval = setInterval(
    ....
, 5000);

$('#slider li').mouseenter(function() {
    if(myinterval) clearInterval(myInterval);
};
于 2012-04-18T09:14:55.077 回答