11.9

轮播图的各种实现方式，没有最好的方式，只有更加适用的方式。这里写了超多代码，然而，让文章变得好臃肿好卡。所以可能会考虑删减，只留核心以及原理逻辑

轮播图的原理
虽然轮播图的实现方式有很多种，但是其实究其原理都是一样的。

首先，外部的用来约束轮播图的大小（当然也可以让内部容器撑开），最重要的是设置overflow:hidden来隐藏子容器超出部分。

其次，子容器放置所有轮播图的区块。一块的大小和父容器的大小一致，如果需要横向轮播则需要将其定位到横向。（float:left再配合width:300%(代表三张轮播图)或者position:absolute;left:100%;以备随时滚动过来。

最后，通过改变子容器的位置margin-left或者left等定位属性，将需要展示的轮播内容移动到父容器的展示位置即可。

再多加点修饰：利用一个全局的常量来记录当前的轮播位置，就可以很轻松地实现到 dots 点的展示啦。然后添加点击事件，滑动事件，定时器什么的，一个功能丰富的轮播图就出来了。

稍微棘手的就是临界值时候，无限轮播的实现稍微麻烦。以及点击切换如果结合动画容易造成动画错位。

然后就来介绍各种轮播图的实现原理，以及分析一下优劣。当然一下见解不过是我自己手撸了这么多个之后自己的感悟吧。这里不会太多说代码部分，代码部分放在最后哦

CSS3 特效动画轮播图
平时的轮播图都是很单调地左滑又滑上滑下滑，稍微再酷一点就顶多是利用transform:scale()来实现变大变小。有幸在腾讯课堂的海棠学院看到了 css3 动画 demo，实现更酷炫的轮播图。

原理
抛却一切别的东西。在轮播图的图片区，不再是事先放好所有图片进行超出隐藏然后进行位移。轮播图区只有当前的显示图片，那么其他图片怎么来呢？当然是 js 动态设置啦。为了酷炫的效果，我们使用相对定位，将图片切割成若干个长方形，再结合background-position:设置图片显示的位置。也就是用若干长方形铺满一张图片，并设置transform:translateY(100%)将小长方形放置在画面之外。之后利用setTimeout函数，进行位移。

1234567
// div指的是小长方形// i 指的是当前个数， 可以理解为 为了实现每个长方形不同步地移入画面function move(div, i) { setTimeout(function(){ div.style.transform = 'translateY(0)'; }, (i+1)*50);}
此外，监听最后一个小长方形的动画事件。当动画结束，将所有长方形移除，并且设置图片。

1234
lastDiv.addEventListener('transitionend', function(){ $wrapConetent.innerHTML = `<img src="img/${imgNum}.jpg">`; canMove = true; // 用于节流，避免用户在动画结束之前点击})
这里效果不方便演示啊，很难讲清楚效果是怎么一个效果。大致描述一下， 就是点击切换时，图片被分割成好多长条，然后依照从中间往两边散开的先后顺序进入页面。

利用前后辅助图实现循环轮播
前后多加一张辅助图 可以实现。这个方法是最初的轮播图实现，大部分功能都能完美实现，唯一缺点就是前后多加了一张图，代码结构上并不好看。实现方式就是 margin-left 一直负负负负负直到到达末尾后重置为 0

无限循环滚动
点击 index 滚到固定位置
dots 点的正确显示
不加辅助图则会出现变形，有相关功能的取舍。例如没有辅助图则左右循环的时候最后一张回到第一章会有将内容全部回滚的动画样式。

不加辅助图 左右循环滚动 但是从最后一张滚到第一张的时候是从右滚到左
突然发现如果只有 3 个是可以点击的嘻嘻嘻 毕竟只关乎前后移动，不会出现需要滑动两次的情况
利用绝对定位实现
原理就是将当前项设置为 left：0，前一项设置为-100%；其他所有都设置为 100%；然后结合animate函数进行动画操作