-2

私は、水平構造のメトロ ルック アンド フィールの Web サイトを開発しています。そのため、ユーザーがスクロールすると、コンテンツが水平方向に移動します。意味がわからない場合は、Windows 8 のスタート メニューのメトロ アプリを例として使用できます。今、私はこのjqueryの助けが必要です.親divの先頭(一番上ではなく左端)にあるdivに「現在」のクラス名を追加する必要があります。私の説明が少し曖昧であることは承知していますが、どんな助けでも大歓迎です。

ここにhtmlとjqueryがあります：

<div id="container">
        <div id="header">
            <div id="arrows">
                <div id="left">
                    <a class="slider" href=".previous">
                        <img src="LeftArrow.png" />
                    </a>
                </div>
                <div id="right">
                    <a class="slider" href=".next">
                        <img src="RightArrow.png" />
                    </a>
                </div>
            </div>
        </div>
        <div id="contentBox">
            <div class="box" style="background-color: blue;">
            </div>
            <div class="box" style="background-color: green;">
            </div>
            <div class="box" style="background-color: red;">
            </div>
            <div class="box" style="background-color: yellow;">
            </div>
            <div class="box" style="background-color: purple;">
            </div>
            <div class="box" style="background-color: orange;">
            </div>
            <div class="box" style="background-color: blueviolet;">
            </div>
        </div>
    </div>
    <div id="script">
        <script type="text/javascript">
            $('body').niceScroll();

            var deck = new $.scrolldeck({
                buttons: '.slider',
                easing: 'easeInSine'
            });

            var tempWidth = 0;
            $('#contentBox .box').first().addClass('current');
            $('#contentBox .box').first().next().addClass('next');
            $('#contentBox .box').each(function () {
                tempWidth += $(this).outerWidth(true);
            });
            $('#contentBox').css({ 'width': tempWidth });                

            $('#right').click(function () {
                $('.previous').removeClass('previous');
                $('.current').addClass('previous');
                $('.current').removeClass('current');
                $('.next').addClass('current');
                $('.current').removeClass('next');
                $('.current').next().addClass('next');

            });

            $('#left').click(function () {
                if (!$('#contentBox .box').first().hasClass('current')) {
                    $('.next').removeClass('next');
                    $('.current').addClass('next');
                    $('.next').removeClass('current');
                    $('.previous').addClass('current');
                    $('.current').removeClass('previous');
                    $('.current').prev().addClass('previous');
                }
            });                
        </script>
    </div>

div "#contentBox" の幅は 4000px で、内部の div は幅 550px で float:left です。現在、矢印を機能させるためにjqueryコードを作成しました。私のjqueryを見ると、同じことが必要ですが、矢印がクリックされたときの代わりに、親div「#contentBox」の先頭にあるdivに依存する必要があります。そのdivは「現在」のものになりますその左が「前」、右が「次」になります。新しい情報が、私が何を達成したいのかを理解するのに役立つことを願っています.

ありがとう

4

1 に答える 1

0

何かのようなもの：

html:

<div class="panel" style="float:left">
panel 1 here
</div>

<div class="panel" style="float:left">
panel 2 here
</div>

jquery:

$(document).on('scroll', function(){
    $('div.panel').removeClass('selected');
    $('div.panel:visible:first-child').addClass('selected');
});
于 2013-10-25T08:47:30.600 に答える