1 
function anim() {
            clearTimeout(animTimeout);              
            $('#wrap .bullet').removeClass('active');
            imageindex++;
            $('#wrap .bullet:nth-child('+ imageindex +')').addClass('active');
            $('#wrap .images img').fadeOut();
            $('#wrap .images img:nth-child('+ imageindex +')').fadeIn();
            if($('#wrap .images img').length == imageindex) {
                imageindex = 0;
            }

    animTimeout = setTimeout(anim, 1500);
}

これが関数です。写真を変更したり、フェードインしたりフェードアウトしたりできます。これはスライドショーです。.bullet は、クリックすると特定の画像にジャンプできる単なる円です。

ちなみに、この関数は機能します。選択した画像にジャンプできます。

        $('#wrap .bullets a').click(function(e){
  e.preventDefault();
            $('#wrap .images img').stop().attr('style', '');
            imageindex = parseInt($(this).data('i') );
            anim();
        });

ただし、現在の写真の箇条書きをアクティブにして、前の写真にジャンプしたりしないようにしたいなど...

anim() 関数が私に与える効果は、最初のスライドですべての「.bullet」-s がアクティブなクラスを取得し、2 番目のスライドからは最初のスライドに戻るまでクラスを持たないことです。また。どうしてこれなの？imageindex が増加している場合、このような動作を行う理由がわかりません... 助けていただければ幸いです。

4

2 に答える 2

0

あなたの場合、私はあなたが達成しようとしていることをする必要のないグローバル変数 imageIndex を置き換えます。

次のコードに置き換えます。

var animTimeout = null;

function anim() {
    clearTimeout(animTimeout);
    var activeIndex = $('#wrap .bullet.active') // select the active bullet
                         .removeClass('active') // remove its 'active' class
                         .next().addClass('active') // put 'active' class to the next item
                         .index(); // retrieve the new active item index
    if (activeIndex < 0) {
        // if end of list reached, put it on the first item
        activeIndex = $('#wrap .bullet').first().addClass('active').index();
    }
    // cancel previous animations before starting fadeOut and fadeIn
    $('#wrap .images img').stop().fadeOut().eq(activeIndex).fadeIn();
    animTimeout = setTimeout(anim, 1500);
}

$('#wrap .bullets a').click(function(e) {
    $('#wrap .images img').stop().attr('style', '');
    $('#wrap .bullet').removeClass('active');
    $('#wrap .bullet').eq($(this).parent().index() - 1).addClass('active');
    anim();
});
于 2012-12-20T12:55:45.880 に答える
0

あなたの問題の根源である可能性のある2つのこと

1- アニメーションが数回トリガーされる可能性がある 2- imageindex が不安定

anim の先頭にステートメントを追加console.log('anim with ' + imageindex)して、anim が呼び出される回数と imageindex の値を確認することをお勧めします。

また、それを使用する他の js 関数の上で imageindex 変数を宣言していることを確認してください。

于 2012-12-20T11:50:14.393 に答える