求一个轮播图的制作思路

[jamfer]

演示如： https://notefolio.net

想做一个跟这个一摸一样的轮播图，用 jquery 。左右滚动已经 OK 了，问题是不知道他怎么实现的无缝衔接（滚动到最后一个的时候后面衔接第一个，往前滚动也是衔接最后一个）

[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]

每一次右滚把上一次消失的图片塞到最右侧，反过来一样

[AoEiuV020JP]

@MRG0 #5 没这么做过的确实可能误解我说的方案，
首先，这里 2 亿个 item 不是让你把 item 复制 2 亿次，也不需要真的出现 length 为 2 亿的数组，2 亿只是个 count ，也可以是 21 亿，效果一样的，
而且这种方案必须先实现视图复用，2 亿个 item 只加载屏幕上真实显示的几个，这个视图复用是客户端开发入门里的常规优化，虽然我觉得 web 端做列表也得做视图复用，但我确实见过有人 web 加载所有 item 的情况，可能要看情况吧，

[AoEiuV020JP]

@AoEiuV020JP #9 2 亿这个数字确实比较大，换个说法，web 开发是不是默认 加载控件数==列表长度？
客户端开发一般是认为 加载控件数==屏幕容纳的控件数+1 ，视角不一样可能同一句话想象出的效果不一样，

[rj]

swiper