使用上一页和下一页按钮制作我自己的滑动图像库
我正在制作一个滑动图像库，其中有 3 页，每页 3 张图像。所有图像都放置在
问题是图像没有滑动到应有的位置。例如，如果我在第一页上按“下一页”，然后按“上一页”，最后再次按“下一页”，则
这是 jsfiddle：
I'm making a sliding image gallery where there are 3 pages with 3 images per page. All the images are placed inside an <ul> container. When you click the "next" button, the next 3 images slide into view and when you click the "prev" button, the previous 3 images slide into view. I've tried to make it so that when you get to the last three images, clicking the "next" button doesn't do anything, and when you are viewing the first three images, clicking the "prev" button doesn't do anything.
The problem is that the images aren't sliding where they are supposed to. For example, if I am on the first page and I press "next", then press "prev", and then finally press "next" again, the <ul> image container will slide to the last page, not the second page; if I click "next" the third time, the image container will slide all the images out such that you only see <ul> container's blank space.
here's the jsfiddle:
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您需要在
prev和next函数之外计算 move_distance，因为这两个函数的值必须相同。此外，您还应该向next函数添加一个控件，就像使用prev函数一样，因此如果没有剩余页面，该函数应该停止。我用数字更改了第一张和第九张图片，这样更容易看到发生了什么。您可以在此处查看结果：http://jsfiddle.net/keune/DWrnb/30/
You need to calculate the move_distance outside the
prevandnextfunctions, because it has to be the same value for both functions. Also you should add a control tonextfunction just like you did withprevfunction, so the function should stop if no pages are left.I changed first and ninth pictures with numbers so it's easier to see what's going on. You can see the result here: http://jsfiddle.net/keune/DWrnb/30/