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

标签 javascript jquery slide image-gallery

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

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

这是 jsfiddle:

jsfiddle

最佳答案

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

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

关于javascript - 使用上一页和下一页按钮制作我自己的滑动图片库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8374077/

相关文章:

javascript - javascript 错误或没有线索

jquery - 如何调整缩放到窗口大小的绝对图像的大小

javascript - 从选择菜单中检查多个值

php - 如何格式化括号部分中的 session 变量

jquery - 如何从该网站创建拖动和滑动效果?

javascript - 解析 json 对象以比较其中的项目

javascript - 将 observables 数组传递给 zip

javascript - 在 joomla 中向 Tinymce 编辑器添加自定义格式

java - 使用 overridependingtransition() 滑动 Activity 时保持背景不变

javascript - Swiperjs 没有正确循环( slider )