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

时间:2011-12-04 08:07:41

标签: javascript jquery slide image-gallery

我正在制作一个滑动图片库,其中有3页,每页3张图片。所有图像都放在<ul>容器内。当您单击“下一步”按钮时,接下来的3个图像将滑入视图,当您单击“上一步”按钮时,前三个图像将滑入视图。我试图这样做,以便当你到达最后三个图像时,单击“下一步”按钮不会做任何事情,当你查看前三个图像时,单击“上一步”按钮不会任何东西。

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

这是jsfiddle:

jsfiddle

1 个答案:

答案 0 :(得分:2)

您需要计算prevnext函数之外的move_distance,因为它必须是两个函数的相同值。另外,您应该像next函数一样向prev函数添加一个控件,因此如果没有剩下的页面,该函数应该停止。

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