如何让我在我的画廊中针对 setInterval 单击项目符号

how to let click on bullet against setInterval in my gallery?

本文关键字：setInterval 单击 符号 项目 我的      更新时间：2023-09-26

我无法做到这一点：在我的图库中，如果我单击"项目符号"（当 setInterval 已经在运行时），就会有一个错误，例如：

当我让图库运行时：编辑：单击项目符号无法正常工作：

var current = 0;
/* click on BULLETS : i think the problem is in this function */
pts.live('click', function () {
        var index = $(this).index();
        clearInterval(timer);
        current = index-1;
        timer = setInterval(function() { showImage(current) },2000); 
        return false;
    });

编辑：谢谢加夫里尔，使用addClass似乎更好！ 但是我无法修复项目符号上的点击：当我单击项目符号时，我想"停止"间隔并直接转到我单击的图像。可能吗？当我尝试时（请参阅下文），"当前"图像保持原样，它会保持 1-2 秒，然后再次开始间隔，就好像什么都没发生一样......你知道吗？

/* click on BULLETS :  */
pts.live('click', function () {
        var index = $(this).index();
        clearInterval(timer);
        li.removeClass('next');
        li.eq(index).addClass('next');
        showImage();
        timer = setInterval(function() { nextImage() }, 1000);
        return false;
    });
//TIMER
var timer = setInterval(function() { nextImage() }, 1000);
li.eq(0).addClass('next');
function nextImage(){
    var index = $('#contG').find('li:.next').index();
    $('#contG').find('li:.next').removeClass('next').addClass('current');
    /*design bullet */
    var pts_li = $("#points").find('ul').find('li');
        pts_li.removeClass('activ');
    /* limit */
    var total = li.length; //3
    if (index+1>total-1) {
        index = 0;
    } else {
        index = index+1;
    }
    li.eq(index).removeClass('current').addClass('next');
    pts_li.eq(index).addClass('activ');
    showImage();
}

/* SHOWIMAGE */
function showImage(){
    //clearInterval(timer);
    $('#contG').find('li:.next').fadeIn("slow");//FADEIN
    $('#contG').find('li:.current').fadeOut("slow");//FADEOUT
}

编辑N°2：最终战斗

好的，我终于找到了解决这个问题的方法... ：-）谢谢萤火虫：

这是代码：

pts.live('click', function () {
        var index = $(this).index();
        clearInterval(timer);
        $('#contG').find('li:.next').removeClass('next').addClass('current');
        li.eq(index).removeClass('current').addClass('next');
        showImage();
        timer = setInterval(function() { nextImage() }, 2500);
        return false;
    });

多谢

您的问题是全局当前变量的使用。开始使用闭包：

(function(c){
    timer = setInterval(function() { showImage(c) },2000);
})(current);

这样，在单击的那一刻，您将当前传递给函数，2 秒后您将该值传递给 showImage 而不是 current'v 值，无论 2 秒后它是什么。

但是，试图了解您想做什么...我认为更好的方法是这样：

与其淡入淡出到你通过当前值"计算"的元素，我会尝试使用类来"签名"当前"元素：$（this）.addClass（"current"）或类似的东西，在淡入淡出中我会使用 $（'#contG'）.find（'li：.current'）.fadeOut（"slow"， function（）{$（this）.removeClass（"current"）}）;

你滑到哪里去了？我的意思是将下一个图像移动到帧的代码在哪里？你能分享整个代码吗？（还是jsfiddle？

另外，我建议使用$(this)而不是查找项目符号的索引，然后再次从其索引中选择它，

pts.live('click', function () {
        clearInterval(timer);
        li.removeClass('next');
        $(this).addClass('next');
        showImage();
        timer = setInterval(function() { nextImage() }, 1000);
        return false;
    });

fadeOut需要时间才能完成，但fadeOut是异步的，fadeOut and fadeIn将模拟执行，所以我会推荐类似的东西。 （这可能是您问题的原因）

 function showImage(){ 
        $('#contG').find('li:.current').fadeOut("slow",function(){
            $('#contG').find('li:.next').fadeIn("slow");
        }
    }


附言不要使用live，它已被弃用。请改用on。

相关文章：