javascript - 使用上一页和下一页按钮制作我自己的滑动图片库

Question

我正在制作一个滑动图片库，其中有 3 页，每页 3 张图片。所有图像都放在 <ul> 中容器。当您单击“下一个”按钮时，接下来的 3 个图像会滑入 View ，当您单击“上一个”按钮时，前 3 个图像会滑入 View 。我试图做到这一点，当您看到最后三张图片时，单击“下一步”按钮不会执行任何操作，而当您查看前三张图片时，单击“上一页”按钮不会执行任何操作任何东西。

问题是图像没有滑动到它们应该滑动的位置。例如，如果我在第一页上按“next”，然后按“prev”，最后再次按“next”，<ul>图片容器会滑到最后一页，而不是第二页；如果我第三次单击“下一步”，图像容器将滑出所有图像，这样您就只能看到 <ul>容器的空白区域。

这是 jsfiddle:

jsfiddle

Answer 1

您需要在 prev 和 next 函数之外计算 move_distance，因为这两个函数的值必须相同。此外，您应该向 next 函数添加一个控件，就像您对 prev 函数所做的那样，因此如果没有剩余页面，该函数应该停止。

我用数字更改了第一张和第九张图片，以便更容易看出发生了什么。您可以在此处查看结果:http://jsfiddle.net/keune/DWrnb/30/