1

私はJQueryを初めて使用し、ドットナビゲーションについて質問があります...

まとめたヒーローコンテンツがいくつかあります（こことJQueryサイトからの投稿を使用）。基本的に、サイクルで非表示および表示される 3 つの div コンテナーがあります。他にも、ナビゲーションとして使用したいドットを含む 3 つの div コンテナーがあります。サイクル中、ドットの色が変化して、ページが現在表示されている「スライド」を表します。

ここでやりたいことは、各ドットにクリック イベントを追加して、サイクルがジャンプして対応するコンテンツを表示するようにすることです。

私のJavaスクリプトは以下です。

        $('.heroContBG').each(function() {
        $(this).hide(0);
    });
    $('.heroContBG').first().show(0);
    $('.heroDots').last().removeClass('heroNavOff').addClass('heroNavOn');
    var delay = 6000; //Set delay time
    var divIdx = 0; //Set divIdx value
    var arrDiv = $('.heroContBG').toArray(); //Assign all heroContBG divs to array
    var arrDot = $('.heroDots').toArray(); //Assign all heroDots divs to array
    arrDot = arrDot.reverse(); //Reserve array index for Dot Navigation  

    function heroBG(){
        var $out = $(arrDiv[divIdx]); //Set $out variable to current array index (set by divIdx)
        var $dotOut = $(arrDot[divIdx]); //Set dotOut variable to current array index (set by divIdx)
        divIdx = (divIdx + 1) % arrDiv.length; //Convert array index 0-2 into 1-3
        var $in = $(arrDiv[divIdx]); //Set $in to $arrDix[divIdx]
        var $dotIn = $(arrDot[divIdx]); //Set $dotIn to $arrDot[divIdx]
        $out.fadeOut(600).hide(); //Hide element
        $dotOut.removeClass('heroNavOn').addClass('heroNavOff'); //Swap classes on .heroDots
        $in.fadeIn(1600).show(); //Show next element
        $dotIn.removeClass('heroNavOff').addClass('heroNavOn'); //Swap classes on .heroDots
    }
    setInterval(heroBG, delay); //Tell browser to loop through elements.

私がする必要があるのは、クリックイベントで divIdx 値を対応する div コンテナーの値と一致するように設定することだと思いますが、まだ運がありません。

私はこれをいじり続け、成功したらここに投稿します。他の誰かがこれを行う方法を知っていれば、それは素晴らしいことです。

また、JQuery のスキルを向上させたいと思っているので、サード パーティのプラグインはあまり使いたくありません。

乾杯、

サイモン

4

1 に答える 1

0

$('.heroDots').index(myClickedHeroDot)を使用して、対象の兄弟の位置を取得します。次に、返されたインデックス値を divIdx に割り当てます。

お役に立てれば ：）

于 2012-12-10T16:22:08.880 に答える