求一个轮播图的制作思路

查看 101|回复 8
作者:jamfer   
演示如: https://notefolio.net
想做一个跟这个一摸一样的轮播图,用 jquery 。左右滚动已经 OK 了,问题是不知道他怎么实现的无缝衔接(滚动到最后一个的时候后面衔接第一个,往前滚动也是衔接最后一个)

轮播图, 滚动, 衔接, jquery

brader   
这个我天天刷抖音无聊看到有个做前端卖大师课的,讲的就很好,我一个后端听得津津有味。
大概思路就是,比如图片是 N 张,放多第一张图片在 N+1 的位置,这样就无缝衔接了。
然后继续向后滚动的时候,就把图片位置瞬间切回第一张的位置,再继续滚动动画,以此类推下去就是无限循环了
MENGKE   
复制第一张,放在最后一张后边。当滚动到复制的这张的时候,把当前位置改为第一张,就无缝衔接了。
往前滚动同理。
建议打开控制台看一下。
AoEiuV020JP   
这个求助不如找些开源的参考一下学的多,
一般通用的一种套路是设置 2 亿个 item ,循环映射到真实的数据列表中,初始状态滚到中间对应真实 index 为 0 ,这样就能前后滚动一亿次,等于无限循环了,
brader   
@AoEiuV020JP 大哥你这思路好逆天啊,我一个后端都感觉不靠谱,哈哈哈
MRG0   
@AoEiuV020JP #3 一般?通用?
AoEiuV020JP   
@brader #4 我是客户端的,不清楚 web 前端是怎样,但应该能视图复用,只要这一点没问题,1 亿个 item 和 2 亿个 item 资源占用是一样的,只是一个数字而已,
这种情况真的可以直接用一个超大列表实现无限循环的,反正真正加载的也只有屏幕中显示的部分,数据源也是真实数据大小,
AlvaMu   
一,二楼正解
bianhui   
每一次右滚把上一次消失的图片塞到最右侧,反过来一样
您需要登录后才可以回帖 登录 | 立即注册

返回顶部