JQuery单击功能和超时

时间:2011-06-28 15:22:43

标签: jquery click gallery

我构建了这个功能来滚动画廊。图库应每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()它会重新激活这个点击功能,但事实并非如此。我们如何实现这一目标。

2 个答案:

答案 0 :(得分:3)

您将两个函数传递给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.

答案 1 :(得分:0)

好像你试图选择一个元素两次:

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

在第二行你可以使用:

islide.removeClass('cornerimgfocus');

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

最高