总结下自己的slider学习经验

前提：不使用三方库

工作中制作slider，引入swiper.js被限制，问了知道不能使用。所以只能使用原生方法去写。
由于很久没有写原生slider，查资料摸索结果如下。

方法一

需要：
1、外层元素outer-box
2、内容（图片）容器slider-box
3、内容（图片）item
4、next方法
步骤：
1、outer-box 元素overflow：hidden，position:relative
2、slider-box元素width为所有图片宽度，确保元素排列在一行，可以使用浮动或者flex布局达成效果,position:absolute，transition: .5s all linear。
3、内容比如有ABC三个元素，需要额外添加一个a,为ABCa四个元素，做无缝切换使用。
4、随便写个箭头添加click写next方法。拿到slider-box控制left向左移动。每次为item.offsetwidth宽度。检测left(或者读取count)得知移动到a元素，下一次切换需要关闭动画控制left重置到起点，开启动画进入下一张。

有了next接下来可以左autonext方法。

方法二

主要api
document.querySlector('item'); document.appendChild('item')
利用元素唯一的特点，循环拿到第一个元素，放到末尾。

需要用到伪类选择器才可以实现动画效果。因为开发环境不允许用伪类所以没有用这种方法。