JS_面向过程无缝轮播图

JS_面向过程无缝轮播图

无缝轮播.gif

• 写之前一定要先理清楚思路，顺序很重要哦~~~

1. 初始化变量
   • 全局变量
   • 布尔值
   • 数组
2. 初始化函数
   • 初始化轮播图的尺寸
   • 创建轮播图外容器
     • 调用【函数3】
     • 调用【函数4】
     • 调用【函数5】
   • 将轮播图外容器添加到页面中
   • 添加鼠标监听事件（包括移入和移除）
   • 将小圆点居中
   • 调用【函数10】，初始化第一个小圆点选中
   • 给window添加 改变窗口尺寸的侦听事件 并调用【函数6】
   • 调用【函数11】
3. 创建图片容器
4. 创建左右切换按钮
5. 创建ul小圆点
6. 窗口尺寸的监听函数
7. 添加左右按钮点击事件
8. 添加小圆点点击事件
9. 创建下一张图片的函数
10. 创建选中当前小圆点索引的函数
11. 创建动画函数（驱动【12】和【13】）
12. 图片移动函数
13. 自动轮播函数（默认向左轮播）
14. 鼠标进入轮播图的监听事件

• Utils.js

export default class Utils{
    static ce(type, style, data) {
        var elem = document.createElement(type);
        Object.assign(elem.style, style);
        return elem;
    }
}

• 引入Utils文件