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');

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

最大