javascript - js里首尾相接轮播的原理是什么？

问题描述

一般的轮播都知道是改变图片父容器的left来实现，那如果是首尾相接的轮播的原理呢？

JS方面该如何回控制呢？

问题解答

我说说我的思路吧，希望能给你帮助。我用Jquery的。<ul> <li><img>1</li> <li><img>2</li> <li><img>3</li> <li><img>4</li> .....<ul>获取所有li标签$('li')。点击左或右移动按钮，ul就左右移动XX像素（每个li大小一样，移动一个li的width）向左就把第一个$('li').eq[0]，放到ul的最后（appendTo）；右移就把最后li放到最前面（prependTO）。加点动画效果animate（）好看点。

首尾相接吧？ 之前看过一些相关轮播原理，一般来说第一张切换到第二张 用js一点点的移动切换的，那么当到了最后一张的时候，我们可以在最后一张后面加多一张第一张图片的拷贝，然后最后一张切换到第一张的分身也是一点点的移动切换，只不过，切换完毕后，立马直接把改成真的第一张的位置，也就是left:0. 这个时候后面再继续又是第一张切换第二张愉快的切换了。- - 不知道题主是不是问的这个？

提供一个思路吧

可以把轮播组件的每一张图片都想象为一个独立的个体，而不是和其他图片共同连成一行的整体

每次图片切换的过程，对于用户来说只能看到 2 张图：当前图片和下一张图片，其余图片不管真实位置在哪儿，只要用户看不到就行所以每当需要切换的时候，我们准备好这 2 张图片以及设置他们对应的位移动画即可，所谓的首尾相接，把『首』放在『尾』的后面然后一定进行动画就行啦

如果要切换上一张图也是同理，准备好当前图片和上一张图片以及设置他们的位移动画即可

另外提醒下，移动端的话最好用transform: translate3d(x, 0, 0)来进行位移，这样能开启 gpu 加速，否则动画会卡顿

其实很简单，假设原来有五张图，结构如下：

<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li><ul>

你把它变成：

<ul> <li>5</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>1</li><ul>

当第一张向左滑动时，动画结束后重置 left 至 第五张 就可以，反之！

轮播图 我倾向 动态改变src

题主知道队列和栈么，如果知道就很好解释了，轮播图就是一个队列，出队列元素重新进队列

用2组相同图片，通过transition和修改left来移动。

当left到第二组第一张的时候，直接关闭trantision并left到第一组第一张，然后再开启transition

原理就是：假设向左移动，每次移动之后，将最左一张图的p挪到最右，也就是将第一个p挪到最后一个，同时修改大容器left的值，加上一个图的宽度。

用jquery的话可以用insertAfter和insertBefore实现