渐隐渐现轮播图

渐隐渐现轮播图

渐隐渐现的原理，是利用css样式中的 透明度 opacity 和 transition过度效果实现的，这里我们用 class类 面向对象的方式来实现效果
1，写好html和css样式 注意 图片的透明度样式先设置为 0，在给第一张图片添加行内样式，透明度为 1，因为第一张要正常显示
2，用面向对象的实现效果， 用class类 在 constructor（） 里面设定属性和面向的对象
3，先写个入口函数 把所有设定的方法都在这里面调用 方便以后一块调用
4，设定焦点 通过图片的数量来生成焦点，用forEach 循环获取图片的数组，用节点操作生成 li焦点 ，在给li设定一个自定义属性和自定义index属性 方便后面判断调用，通过判断给第一个焦点添加样式
5，设定运动方法 ，先给方法里面写个形参，首先把当前的第一张图片透明度设置为 0 ，在判断参数 == right 如果成立 轮播次数就++ 判断参数 == left 成立就轮播次数 – 在设置极值 当次数 == -1是 赋值为图片数组length - 1
当次数 == 图片数组时 赋值为 0，在根据新的次数设定图片透明度，最后别忘了调用 设定焦点样式的方法
6，设定轮播 在定时器里面调用运动方法 给它设定实参为 right
7，设定鼠标移入移出效果 鼠标移入清除定时器 ，鼠标移出调用 运动方法
8，设定点击事件 用事件的委托方式实现 判断点击的是不是左右箭头，调用 运动方法，同时设定相的实参 判断点击的是不是焦点 先把当前的照片的透明度设定为 0 在获取我们之前设定的 index属性值赋值给 轮播次数 在根据新的属性设定图片的透明度为 1 最后别忘了调用 焦点的样式方法
9，设定焦点样式的方法 获取所有的焦点数组 循环遍历 先清除所有的样式， 在给点击的样式添加class属性
10，创建实例化对象 调用入口函数