Question

我无法完成这项工作：在我的图库中，如果我点击“子弹”（当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;
    });

编辑：感谢Gavriel，确实更适合使用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：最终战斗

好吧我终于找到了解决这个问题的方法...... :-)谢谢Firebug：

这是代码：

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

非常感谢

Answer 1

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

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

这种方式在点击时你会将当前的电流传递给该函数，2秒后你将把这个值传递给showImage而不是当前的值，无论它在2秒后可能是什么。

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

我会尝试使用类来“签署”“当前”元素：$（this）.addClass（“current”）或其他东西，而不是淡化到你用“当前”值“计算”的元素。像这样，在淡入淡出中，我会使用$（'＃contG'）。find（'li：.current'）。fadeOut（“slow”，function（）{$（this）.removeClass（“current”）} ）;

Answer 2

你在哪里滑动？我的意思是将下一个图像移动到帧的代码在哪里？你能分享整个代码吗？（或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");
        }
    }

<强> P.S。
不要使用live，不推荐使用它。请改用on。

如何让我的库中的setInterval点击子弹？

2 个答案: