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

EDIT：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
}

EDIT 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 に渡します。

しかし、あなたがやりたいことを理解しようとしています...より良い方法は次のようなものだと思います:

現在の値で「計算」する要素にフェードする代わりに、クラスを使用して「現在の」要素に「署名」しようとします: $(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 に答える