javascript - Was ist das Prinzip eines End-to-End-Karussells in JS?

Question

Allgemeine Karussells werden durch Ändern der linken Seite des übergeordneten Containers des Bildes implementiert. Aber wie sieht es mit dem Prinzip von Karussells aus, die Ende an Ende verbunden sind?

Wie steuere ich JS?

Answer 1

我说说我的思路吧，希望能给你帮助。我用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（）好看点。

Answer 2

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

Answer 3

提供一个思路吧

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

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

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

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

Answer 4

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

<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 至 第五张 就可以，反之！

Answer 5

轮播图 我倾向 动态改变src

Answer 6

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

Answer 7

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

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

Answer 8

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

Answer 9

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