0

div を水平方向にスクロールさせようとしています。私の div は 100% です。div のサイズ全体 (100%) をスクロールして、div をさらに表示したいと考えています。そのようです：

ここに画像の説明を入力

JS に +150% スクロールするように指示するボタンは既にありますが、正しく動作しません。

さて、状況は次のとおりです。私の div は 100% ですが、その div 内には 800x500 の画像があり、100& div 内で垂直/水平にしたいです。

したがって、矢印を押すと、div1 が div2 に移動し、次に div2 が div3 に移動するようになります。

ありがとう

これが私のコードです

HTML:

<div class= "edge_container" data-stellar-ratio="3">

        <div class = "edge_wrapper">

            <div class="OLLIEJ_Welcome"> <!--id="stage0" data-slide="0">-->
                Hello &amp; Test
            </div>

            <div class="EDGE_idea"> <!--id="stage1" data-slide="1">-->
                IDEAS &amp; CONCEPTS
            </div>

            <div class="OLLIEJ_002"> <!--id="stage2" data-slide="2">-->
                RESEARCH &amp; DEVELOPMENT
            </div>

            <div class="OLLIEJ_003"> <!--id="stage3" data-slide="3">-->
                BUILD &amp; PRODUCTION
            </div>

        </div>

    </div>

CSS:

.edge_container{
    position:absolute;
    height: 550px;
    overflow: hidden;   
    width:100%;
    white-space: nowrap;


    display:block;

    top: 50%;
    margin-top: -250px;

    background-color:#00FFFF;
}

.edge_wrapper{
    /*position:absolute;*/
    width: 300%;
    white-space: nowrap;
    vertical-align: top;
    background-color:#3366FF;

}

.OLLIEJ_Welcome{
    height: 500px;
    width: 800px;
    display: inline-block;
    white-space: normal;
    margin-left: 50%;
    left: -400px;
    padding-left: 2px;

}

.EDGE_idea{
    height: 500px;
    width: 800px;

    display: inline-block;
    white-space: normal;
    margin-left: 50%;
    left: -400px;
    padding-left: 2px;

}


.OLLIEJ_002{
    height: 500px;
    width: 800px;
    display: inline-block;
    white-space: normal;
    margin-left: 50%;
    left: -400px;
    padding-left: 2px;
}


.OLLIEJ_003{
    height: 500px;
    width: 800px;

    display: inline-block;
    white-space: normal;
    margin-left: 50%;
    left: -400px;
    padding-left: 2px;

}

JS:

button_right_0.click(function (e) {
        //dataslide = $(this).attr('data-slide');

        if(horSlide_0 < 3){
            console.debug("Button Pressed");
            $('.edge_wrapper').animate({marginLeft: '-=100%'},1000, 'easeInOutQuint'); 
            //horSlide_0 ++;
        }
        //hideButtons(dataslide);

    });
4

1 に答える 1

0

div2 つの要素が必要です。最初のものはマスクとして機能し、必要なコンテンツ (つまり、各スライド) のみを表示します。div次に、すべての要素を保持する別の内部があります。次のようなものが必要に応じて機能するはずです。

<div id="slider_mask">
    <div id="slider_content">
        <img src="src/to/img1.jpg" />
        <img src="src/to/img2.jpg" />
    </div>
</div>

CSS は次のようになります (jQuery を使用して、子ノードの#slider_contentに基づいての全体の幅を計算できます。outerWidth()

#slider_mask {
    width: 100%;
    height: 500px;
    overflow: hidden;
    position: relative;
}

#slider_content {
    width: 2400px; /* 800 * 3 */
    height: 500px;
    position: absolute;
    top: 0;
    left: 0;
}
    #slider_content img {
        width: 800px;
        height: 500px;
        float: left;
    }

マークアップを使用すると、keypressjQuery を介してイベントを処理し、次のleftプロパティをアニメーション化でき#slider_contentます。

var curr_left = 0,
      content = $('#slider_content');

$(window).keyup(function(e) {
    // Right arrow key:
    if(e.which == 39)
    {
        // Animate to the left if it's not already set:
        if(curr_left <= 0 && curr_left > -1600)
        {
            content.animate({ 'left': (curr_left - 800) }, 'fast', function() { 
                curr_left -= 800 
            });
        }
    }

    // Left arrow key:
    else if(e.which == 37)
    {
        if(curr_left < 0)
        {
            content.animate({ 'left': (curr_left + 800) }, 'fast', function() { 
                curr_left += 800 
            });
        }
    }
});​

実際の例を示すために、簡単な jsFiddle をまとめました: http://jsfiddle.net/Y2Ese/

于 2012-11-30T13:47:49.747 に答える