我这里有几张这样的卡片，当我滚动鼠标的时候卡片是无穷无尽的，但是只要你一仔细观察就能发现其实这些卡片总共就是只有4张，其他的都是简单的重复排列。那像这种效果，这种无限重复的效果是怎么实现的？难道是真的排了很多的卡片排成一排吗？那肯定不是，这样的话太low了。

通过这个案例来了解一下这种无限重复的效果的开发思路，请大家先把思路最重要打在公屏上。这个案例效果的基本逻辑肯定是通过鼠标的滚轮滚动，通过计算滚轮滚动的滚动值的累加或者累减，然后把这个值应用在这几个卡片的父元素上，让它产生一个横向的、横向的位置的偏移，这样就能实现鼠标上下滚动带动卡片的整体左右位移的效果。

然后基本的设置是肯定是要设置父元素的，整体是居中的位置，这样方便这样的横向、左右滚动的处理。然后会需要把元素做一个比较重要的设置，那元素它的中间的这样的间隔是通过元素的左边距跟右(口误)边距这样的结合产生的。

这样的设置是为了让元素整体上是紧密衔接的状态，就方便后续的一些元素的整体宽度的计算，不然中间的空隙如果通过一些额外的方式去产生，后续的计算会更麻烦一些。所以这里的元素的整体宽度记住一定是元素本身的宽度加上左边距跟右边距，这样的元素是整体。

然后其实也看到了，这样四个元素是完全不够铺满页面的显示宽度，所以我们首先要对它做手动的增加元素的操作。

增加到一个什么程度？刚好它的左边跟右边都有一个按照顺序排列的元素，完全在显示的区域的范围之外，这两个元素就会起到非常关键的作用。接下来我们先看一下它往右移动逻辑的实现。

往右移动其实相当于就是我们通过整体的位移，让父元素产生位移，那位移到一定程度之后，比如说位移到这样的位置。其实我们后面这个元素就已经基本上出现了，这个元素已经出现了，后面是没有元素的。

右边这里这个元素我们就可以把它放到左边这个位置过来，对不对左边这个位置过来？这样你再往右滑，这个东西又能出现了同样的逻辑它再往右滑，这个元素是不是又可以把它放到这边来？这样就会形成这种好像它一直都有元素不停的出来的效果。

什么样的一个时机，我们比较合适去做最后一个元素放到最前面的操作？其实就可以用元素的整体宽度作为一个时机，比如说它一个整体宽度是一个X这样的值，也就是当父元素横向的变化值累加到了这个值的时候，我们就可以进行这样一个操作。

这里看不见最后的这样的一个元素，把它放到最前面这里，但是我们放到前面过来之后，这里会有一个比较大的问题，因为这个父元素它的偏移已经形成了。

比如说我们把这个东西先往下移，复制一份，比如说这个父元素已经偏移到这样一个程度了。如果你把这个元素放到这个父元素的开头，其实它这个父元素的偏移依然是这样的偏移程度。这个元素你添加到这个父元素的开头，它其实整体效果是这样的一个效果，而不是一开始看到的说元素出现在这样一个位置，还没出现的位置。

如果你把这个元素直接把它取过来放到最前面然后不做任何处理你会发现这个元素突然就会出现在开头这个位置了，所以这个父元素的偏移也要对它进行处理，就是让它这个偏移的值减少一个元素的这样的一个宽度。这样这个父元素会整体往往回偏移这样的一个位置，那它是不是就相当于是跟这样的一个状态衔接上了？所以这一步也是非常重要的，这样它就看起来是一个无缝连接的效果了。

同样的原理如果它整体是往左边滚动左边移动，其实也是类似的，它往左边移动，比如说移动到这样的一个位置，它是一样的一个逻辑，这个父元素整体往左移动的一个距离，那可以把这个元素添加到这个后面，也就是说其实真正添加形成的逻辑其实是这样的一个逻辑。

那如何能让这个这个父元素整体看起来又是一个无缝衔接的效果？明显要让它整体往回偏移一个(一个卡片)的一个宽度，它相当于是父元素这个偏移值，得再加上x。所以像这种无限循环、无限重复的这种逻辑基本上都有一些备用的元素，在这种看不见的地方进行这种无缝切换。这样你就看起来好像这个元素永远都在不停的产生。