轮播图的实现思路

在使用原生js和框架作出轮播图后，我对轮播图的整体构造和功能有了一个较为具体的掌握，以下是我总结出来的轮播构造：

1. 总体的布局
   轮播的一般结构是在外部使用一个容器div,将overflow设置为hidden，接下来是在div里套一个列表ul，并且ul的长度是（全部轮播图+2）*每张图片的长度，这样才能够实现循环轮播，如图所示：
   在播放到第二张图1时让轮播图瞬间跳变到第一张图1，这样能实现无缝衔接，同理播放第一张图5也是如此。
   这样设置完之后，我们就只能看到一张图，其余都被隐藏起来了，我们通过给ul设置定位，改变他的left值，就能让图片切换起来。其他比如左右点击块和底部的小圆点就不详细说了，这是一个自由设计，因人而异，且无关紧要。重点在于逻辑实现。
2. js逻辑
   首先，我们要对要实现的功能有一个明确的认知，知道了功能才能够实现相应的逻辑
   完整的轮播图需要具备的功能有：
   1、点击左右浮块实现单张图片切换
   2、在图片切换的同时底部圆点同时更新
   3、点击圆点切换到对应的图片
   4、自动播放，且鼠标移入轮播图自动播放停止，移出重新自动播放
   思路：
   定义一个图片切换函数，通过判断形参的类型，实现不同的切换需求，如果形参是布尔值，则实现单张图片切换，如果形参是下标，则实现多张图片切换，在图片切换的尾部调用圆点更新函数
   圆点更新函数：同样判断形参的类型，如果是布尔值，每次跳变一个，如果是数字，则跳到对应的圆点，这里使用排他法更新小圆点。