手写轮播图

一个"高级"轮播图
大家好我们今天来整一个高级轮播图，轮播图嘛，大家可能在网上可以找到各种插件，但是我觉得自己会手写轮播图很重要，能帮大家复习一下js前面的知识，如果哪天你去面试，项目经理让你写个轮播图，你说你会用插件，那是不是有点不好呢。废话就不说了，开整。
第一步:先思考写个轮播图需要什么东西。
第二步:用css搭建个模型
第三步:动手写js

首先我们要知道轮播图的图片应为动态添加，这样后期才方便添加别的图片，当然图片的序号也要动态添加，毕竟得与图片数量对应，然后就是要添加页面左右两边的小箭头了(当鼠标移出轮播图后自动隐藏)，已及创建定时器让图片能自动轮播，以及最关键，当图片轮播到最后一页后，会自动将第一张图片添加到后面，最终才能实现轮播效果。

说了这么多，其实轮播图很简单，我先展示一下静态页面
overflow: hidden;

为什么是这样的效果呢?
其实吧，没有为什么，轮播图就是这样,我们最后看到的不过是隐藏之后的样子。

js部分

虽然我把图片写死了，但是页面右下角的序号还是得动态添加的

然后我们接着要写点击事件了，为了代码的规范，我们先给它封装

负号是因为正常情况下图片是从右向左移动，但是这样的话，我们的轮播效果就会变得相反，所以我们给了它个负号，这样图片才会顺着我们想要的方向移动。
注意
对了在动态添加ol下面的li后，我们需要在外面获取一遍

let ol_li = ol.getElementsByTagName('li')

接下来，我们要将页面上的左右箭头完工并给它添加点击事件

最最最后一步，克隆一个li(第一个)

let cllone_li = first_li.cloneNode(true)
        ul.appendChild(cllone_li)

是不是觉得很简单，其实确实，当然如果你们看到这你会发现animate是我引入的，也是动画效果。这里大家可以自己凭自己的喜好去创建。

轮播图现在基本上都是网上直接引用，很难见到手码的，但是我希望大家能自己敲一敲。我已经把关键代码都发了出来，希望对大家能有所帮助

setAttribute() 方法添加指定的属性，并为其赋指定的值。

appendChild() 方法向节点添加最后一个子节点。

onmouseenter 事件在鼠标移入元素时触发。

onmouseleave 事件在鼠标移出元素时触发。

cloneNode() 方法创建节点的拷贝，并返回该副本。

cloneNode() 方法克隆所有属性以及它们的值。

如果您需要克隆所有后代，请把 deep 参数设置 true，否则设置为 false