0

我无法完成这项工作：在我的画廊中，如果我单击“项目符号”（当 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;
    });

非常感谢

4

2 回答 2

1

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

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

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

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

我不会对你通过 current 的值“计算”的元素进行淡入淡出，而是尝试使用类来“签署”“当前”元素：$(this).addClass("current") 或类似的东西，在淡入淡出时我会使用 $('#contG').find('li:.current').fadeOut("slow", function(){$(this).removeClass("current")});

于 2012-05-16T18:37:07.030 回答
0

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

ps
不要使用live，它已弃用。改为使用on。

于 2012-05-17T05:33:03.330 回答