原生js实现响应式全屏轮播图

声明：以下方法是刚入门前端实验产品，高手绕道。

最近做自己网站的时候遇到轮播图问题。网络上无数个教程都描述了如何做出一个轮播图，或者如何用jq做出一个自适应轮播图。对于还没有时间去了解jq的dba来说，实在没有精力去了解jq（主要是js还不熟），但是自己琢磨了下好像可以用纯js+css3实现自适应轮播。

鉴于是我无聊给我自己做的网站，所以在写前端的时候没有考虑太多支持各种老版本浏览器，所以兼容性问题不在讨论范围内。

正文：

轮播图设计思路：

需求要点：
1、自动播放
2、左右按钮控制变换
3、分页下标
4、如果做全屏轮播图，需要考虑屏幕宽度问题

实现思路：
    1、需要一个一级容器存放所有数据，做鼠标移动暂停自动播放需要调用
    2、需要多个二级容器存放内容，思路有两种：
        第一种各图片层叠，用position 父模块relative + 子模块absolute属性，
        第二种仅在父级使用position relative属性或者flex等模式，使其图片水平横向扩展
        
        层叠需要从层级z-index属性或者透明叠层等方向下手，能发展淡入淡出效果
        横向需要从图片偏移像素下手，采用left属性较多，比较容易实现横向移动过度效果。

        全屏轮播方式建议水平扩展而不是层叠，水平扩展如果是全屏轮播图需要处理不同屏幕大小之间宽度问题，相对容易实现
        局部轮播按需求可采用层叠等方式

    3、分页下标和二级容器放在同层级并且浮动到轮播图父容器上
    4、需要两个按钮放到最上层


    offsetwidth  获取left属性所需要的自适应屏幕宽度

模块样式设计：
    本次使用flex横向扩展模式
    1、确定一级box宽高
    2、确定二级容器数据，做移动轮播宽度设定需要很长很长的宽度；
    3、图片容器宽度和需要展示宽度一致
    4、浮动，用flex，移动采用 left
    5、确定按钮位置
    6、确定下标位置和样式颜色
    7、自动轮播和鼠标暂停

注意细节：
    1、自适应全屏的选择，使用flex还是div等
    2、js边缘处理
    3、分页下表的移动和点击操作
    4、自动播放，原理是定时模拟点击

如下图我做的实验截图：

 通过伪类可以让按钮在鼠标不在的情况下隐藏。

 19年9.29，重构了代码，解决了改变窗口大小造成的图片位移，最后一张到第一张之间的过渡横拉问题，加入响应式css，自适应各种屏幕，还有唯一一个问题待优化：在改变窗口大小口第一次滑动产生的快速位移，解决思路是宽度监听端口中增加像素值判断来优化，后续再尝试；

css部分代码如下：

/* 轮播图 */
.img{
    width: 100%;
    height: 100%;
}

.lb_box{
    width: 100%;
    height: 25vw;
}
.lb_imgbox{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.lb_imgleft{
    widt