0

メニューボタンをクリックするとコンテンツが水平にスクロールしなければならないセクションがあるウェブサイトを作成しようとしています。それには方向ナビゲーションもあります。方向ナビゲーションで取得したと思いますが、わかりませんdivをクリックするたびに移動するために、divの位置を追跡する方法について。私はオフセット（）を使用しようとしています。jqueryを使用していますが、機能しません。誰かがこれを達成するための道を歩むのを手伝ってくれたら幸いです。いくつかのコードと js フィドルを残しておきますので、これまでの内容を確認してください。

html コード:

<nav>
    <ul>
        <li id="1" class="active-state">1</li>
        <li id="2">2</li>
        <li id="3">3</li>
        <li id="4">4</li>
        <li id="5">5</li>
    </ul>
</nav>

<section id="content">
    <div id="wrapper">
        <div class="content" id="yellow"></div>
        <div class="content" id="blue"></div>
        <div class="content" id="red"></div>
        <div class="content" id="purple"></div>
        <div class="content" id="green"></div>
    </div>
</section>
<ul id="directionNav">
    <li id="left">left</li>
    <li id="right">right</li>
</ul>

水平スクロールを行うjqueryコード：

$("#3").on("click", horizontalScroll);
$("#4").on("click", horizontalScroll2);

function horizontalScroll() {
console.log($("#3").offset().left);
$("#wrapper").animate({
    right: ($("#4").offset().left -1200)
});
console.log("clicked");
}

function horizontalScroll2() {
console.log($("#4").offset().left);
$("#wrapper").animate({
    right: ($("#4").offset().left -1200)
});
console.log("clicked");
}

ここにフィドルがあります： http://jsfiddle.net/xtatanx/DY3k3/

本当にありがとうございました！

4

1 に答える 1

1

あなたはたくさんコーディングしていると思います！

彼がリンクされているページで HTML タグに属性を与えます。

<li frame='1' class='nav'>page 1</li>

.nav次に、属性で呼び出されたページに移動するすべてにサイン関数を追加します。

function changeFrame(){
    $('#wrapper').animate({left : $(this).attr('frame')*-600});
    $('.active-state').removeClass('active-state')
    $(this).addClass('active-state')
}

次/前のリンクについては、現在のページを確認し、1 を加算/減算するだけです。よりクリーンなコードのために 2 関数で行いました。

クリックすると、クリックされたことを確認します。

function navigFrame(){
    switch(this.id){
        case 'left' : doNavig(-1); break;
        case 'right' : doNavig(1); break;
    }
}

のコードは次のonNavigとおりです。

function doNavig(direction){
    var newPage = parseInt($('.active-state').attr('frame'))+direction;
    if(newPage < $('.nav').length && newPage >= 0){
        $('#wrapper').animate({left : newPage*-600});
        $('.active-state').removeClass('active-state')
        $('.nav:nth-child('+String(newPage + 1)+')').addClass('active-state')
    }
}

コードはもっと最適化できるかもしれませんが、私はあなたにいくつかの作業をしてもらいたい:)

完全なコードは次のとおりです: http://jsfiddle.net/DY3k3/2/

于 2013-04-30T17:32:52.270 に答える