如何使用 jquery 动画滚动

Question

我正在尝试让一些按钮在这里工作。 http://www.sepulturaimpex.ro/portofoliu 是网站。

当我单击 left/right 按钮时，我想从一个项目移动到另一个项目

图片宽度随机。

我怎样才能做到这一点？

这是我正在使用的脚本。

$(document).ready(function () {
    $(".prev").click(function () {
        $(".p_horizontal_wrap").animate({
            scrollLeft: "-=700"
        })
    }), $(".next").click(function () {
        $(".p_horizontal_wrap").animate({
            scrollLeft: "+=700"
        })
    })
}),

Answer 1

答案就在你的问题中；如果图像的宽度是随机的，那么你不能使用固定宽度滚动

我认为最好的办法是向前看并找到下一个对象的 x 位置，然后滚动到该位置。根据您的标记，您可能需要跟踪正在滚动到视图中的对象索引。

您的下一个按钮（和您的 next/prev 可能相同）如下所示：

$(".next").click(function() {
    var targ = /** find out the next item to be shown **/
    var left = $(targ).position().left;
    $(".p_horizontal_wrap").animate({
        scrollLeft: left
    });
});

如何使用 jquery 动画滚动

How to scroll with jquery animate

html

javascript

jquery

scroll

jquery-animate