JS实现轮播图图片无缝滚动原理

当轮播图滚动至现有图片最后一张时，需要让轮播图下一跳回到第一张图片，从而实现无限无缝循环滚动效果，但是为什么需要采用克隆来实现呢？为什么不直接从最后一张回到第一张？

原理：在我们采用 num 变量计算图片移动的次数时，增加了一个 if 的判断条件，用于判断图片是否滚动至最后一张图片位置，如果没有复制或者克隆来新增一个子节点，循环就会在到达最后一张图时num 和 left 变为 0 ，但是结束了 if 判断后会有一个 num 自增的动作，所以 num 变为 1 ，就会直接跳到第二张图，故需要克隆第一张图片作为最后一个子节点才能实现无缝滚动的效果。

其中需要用到的方法（以按下轮播图的向右滑动键为例）：

1. 复制第一张图放到最后一张的后面，生成一个新的子节点（先在 html 完成第一个图片的复制后去 js 添加如下代码：）

   var num = 0;
   element.addEventListener('click', function() {
       //若走到最后复制的一张图，此时 存放所有图片的 ul 要快速恢复 left 为0
       if(num == ul.children.length - 1) {
           ul.style.left = 0;
           num = 0;
       }
       num ++;
       animate(ul, -num * 图片宽度);
   })
   

   特点：若后期图片有变更需要修改 js 代码，不方便，不够动态

2. 克隆第一张图片，为存放图片的 ul 新增此节点：