jquery - jQuery + CSS | 水平滚动

Question

我试图让我的 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);

    });

Answer 1

你需要有两个div元素。第一个用作掩码，仅显示您希望的内容（即每张幻灯片）。然后你有另一个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;
    }

现在使用您的标记，您可以keypress通过 jQuery 处理事件，对以下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/