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.

Answer 2

似乎您尝试选择一个元素两次：

var islide = $('.cornerimgfocus');
$(islide).removeClass('cornerimgfocus');

在第二行您可以使用：

islide.removeClass('cornerimgfocus');

但不知道这是否导致了您的问题，

Max