Question

我有一个名为rotatePics()的幻灯片，从页面加载开始。我还有一些li个，点击后会得到rel的{{1}}值。 li的{{1}}与预先加载的幻灯片图片的rel匹配。因此，当单击一个时，我想停止当前名为rotatePics的幻灯片放映函数并重新启动它，但解析一个新的整数。

目前正在发生的事情是，我能够运行新的幻灯片放映功能，但不能替换页面加载时运行的幻灯片放映功能。

我需要停止li并使用变量id重新启动它，只运行后一个函数。

rotatePics()

这是number函数

的代码

$('a.main-img').click(function (e)
{
    e.preventDefault();

    var clickedLi = $(this).closest('li').attr('rel');

    var number = parseInt(clickedLi);

    rotatePics(number);

});

我也知道模数部分会改变整数。这最初只是一个滚动的幻灯片，没有选择新图像的选项。

Answer 1

您只需将setTimeout的返回值分配给变量，然后调用clearTimeout。

var timerID;

// ...

timerID = setTimeout(function ()
{
    rotatePics(++currentPhoto); 
}, 1000);

// ...

clearTimeout(timerID);

Answer 2

按如下方式清除超时：

var rotatePicsTimer;
function rotatePics(currentPhoto){ 

    var numberOfPhotos = $('#banner-holder img').length; 

    currentPhoto = currentPhoto % numberOfPhotos; 

    $('#banner-holder img').eq(currentPhoto).fadeOut(function (){ 
        $('#banner-holder img').each(function (i) 
        { 
            $(this).css('zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos); 
        }); 

        $(this).show(); 

        rotatePicsTimer = setTimeout(function () 
        { 
            rotatePics(++currentPhoto);  
        }, 1000); 
    }); 
};

$('a.main-img').click(function (e)   
{   
    e.preventDefault();   

    var clickedLi = $(this).closest('li').attr('rel');   

    var number = parseInt(clickedLi);   

    clearTimeout(rotatePicsTimer);
    rotatePics(number);
});

单击链接时停止功能。 JQuery的

2 个答案: