create image slider that shows part of previous and next image(创建显示上一个和下一个图像的一部分的图像滑块)
问题描述
我正在尝试使用 jQuery 创建幻灯片(类似于 jquery scrollhorz)但我想部分显示上一张和下一张图片.
I'm trying to create a slideshow using jQuery (similar to jquery scrollhorz) but I want the previous and next image partly shown.
现在,我拥有的是一个 div(隐藏了溢出),其中包含我拥有的所有图像.当按下上一个或下一个按钮时,我将整个 div 向左或向右设置动画.问题是,如果我将许多图像加载到 div 中,它就会变得迟钝且缓慢.
Right now, what I have, is a div (with overflow hidden) containing all the images I have. When previous or next button is pressed, I animate the whole div either to left or right. The problem is, if I have many images loaded into the div, it becomes laggy and slow.
实现此图像滑块的最佳设计是什么?
What is the best design to implement this image slider?
推荐答案
如果不进入所需的代码,我的建议是使用 jquery(或 moo,如果那是你的东西)来维护一个三到五个图像长的 div,并保留所有要显示的图像的 url 列表.当您向左或向右滑动图像时,您会弹出另一端的图像并将相应的图像添加到另一侧.
Without going into the code required, my suggestion would be to use jquery (or moo if that's your thing) to maintain a div that is three to five images long, and keep a list of urls to all the images you want displayed. When you slide the images left or right, you'll pop off the image on the opposite end and add the appropriate image to the other side.
您可以使用相同的技术无缝地遍历列表.
You could use the same technique to loop through the list seamlessly.
这篇关于创建显示上一个和下一个图像的一部分的图像滑块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:创建显示上一个和下一个图像的一部分的图像滑块
- 从原点悬停时触发 translateY() 2022-01-01
- 如何显示带有换行符的文本标签? 2022-01-01
- 如何调试 CSS/Javascript 悬停问题 2022-01-01
- 在不使用循环的情况下查找数字数组中的一项 2022-01-01
- 为什么我的页面无法在 Github 上加载? 2022-01-01
- 我不能使用 json 使用 react 向我的 web api 发出 Post 请求 2022-01-01
- 为什么悬停在委托事件处理程序中不起作用? 2022-01-01
- 如何向 ipc 渲染器发送添加回调 2022-01-01
- 使用 iframe URL 的 jQuery UI 对话框 2022-01-01
- 是否可以将标志传递给 Gulp 以使其以不同的方式 2022-01-01