jQuery点击函数和超时

Question

我构建了这个函数来滚动浏览画廊。图库应每 6000 毫秒自行滚动到下一张图像，但如果用户单击缩略图，则应直接转到该缩略图，然后将计时器重置为 6000 毫秒。

我的代码无法正常工作，因为我认为我的 JQuery 重新触发功能不正确。不太确定我在做什么。

var timerp = null;

$('.thumbs').click(function() {
         clearTimeout(timerp);
         $('.cornerimgfocus').removeClass('cornerimgfocus');
         $('#P' + $(this).attr('id')).addClass('cornerimgfocus');
     }, function gallery() {
        clearTimeout(timerp);
        timerp = setTimeout(function() {
            var islide = $('.cornerimgfocus');
            $(islide).removeClass('cornerimgfocus');                    
            if(islide[0]==$('.cornerimg:last')[0]) {
            var nextslide =  $('.cornerimg').first();
            }
            else {
            var nextslide = $(islide).next();
            }
             gallery();
        }, 6000);
    });

有什么想法吗？

太棒了

顺便说一句，鼠标点击工作得很好，只是超时我没有得到正确的结果。

我试过这个。依然没有。点击仍然有效，但超时功能不起作用。

$('.thumbs').click(function() {
         clearTimeout(timerp);
         $('.cornerimgfocus').removeClass('cornerimgfocus');
         $('#P' + $(this).attr('id')).addClass('cornerimgfocus');
         timerp = setTimeout(function() {
         $('#' + $(this).attr('id')).next().click()
         }, 3000)

    });

我认为如果我添加 .next().click() 它将重新激活此点击功能，但事实并非如此。我们如何实现这一目标。

Answer 1

您将两个函数传递给 click()方法，该方法不受支持。另外，看起来你想要 setInterval()而不是setTimeout() ，并且当计时器计时时，您不会将 cornerimgfocus 类添加到下一张幻灯片。尝试:

var timerp = null;

$('.thumbs').click(function() {
    if (timerp) {
        window.clearInterval(timerp);
    }
    $('.cornerimgfocus').removeClass('cornerimgfocus');
    $('#P' + $(this).attr('id')).addClass('cornerimgfocus');
    gallery();
});

function gallery()
{
    timerp = window.setInterval(function() {
        var islide = $('.cornerimgfocus');
        islide.removeClass('cornerimgfocus');
        var nextSlide;
        if (islide[0] == $('.cornerimg:last')[0]) {
            nextslide = $('.cornerimg').first();
        } else {
            nextslide = islide.next();
        }
        nextSlide.addClass('cornerimgfocus');
    }, 6000);
}

gallery();  // Start the animation.