jquery - 在单行中滑动 div

Question

如何让div在按钮左/右键单击时单行滑动？
类似于 this 画廊的底部

这是我在 JSFiddle 中的尝试

$( "#right" ).click(function() {
    $( ".block" ).animate({ "left": "+=50px" }, "slow" );
    });
    $( "#left" ).click(function(){
    $( ".block" ).animate({ "left": "-=50px" }, "slow" );
    });

Answer 1

这是更新的 FIDDLE .

尝试使用 scrollLeft 而不是 left 属性:

$( "#right" ).click(function() {
    $( ".box" ).animate({
        scrollLeft: '+=' + $( ".box" ).width()
    });
});
$( "#left" ).click(function(){
    $( ".box" ).animate({
        scrollLeft: '-=' + $( ".box" ).width()
    });
});

这给您带来了巨大的优势，即您无需检查方框是否会允许的最大位置。

您还需要修改 CSS:

.box {
    width: 600px;
    background-color: #000;
    overflow:hidden;
    white-space: nowrap;
}
.block {
    display:inline-block;
    background-color: #abc;
    width: 90px;
    height: 90px;
    margin: 5px;
    margin-left: 10px;
}

这里最重要的事情(对于机制工作必不可少)是 overflow: hidden，white-space: nowrap in .box class 和 display: inline-block in .block 类。