diff --git a/images/bg1.jpg b/images/bg1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6ebdcf8fb7373f32a75db382f77f77b3d5b6b718
Binary files /dev/null and b/images/bg1.jpg differ
diff --git a/images/bg2.jpg b/images/bg2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a075e473bd8d6c3b6c1403564e397d00f97fda46
Binary files /dev/null and b/images/bg2.jpg differ
diff --git a/images/bg3.jpg b/images/bg3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5a96a9c216c1cb6a40c35f1cfd26b62e868bd81e
Binary files /dev/null and b/images/bg3.jpg differ
diff --git a/images/bg4.jpg b/images/bg4.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..030b311ba0ea2c7d7c77f7b53b3b9dfe8c613889
Binary files /dev/null and b/images/bg4.jpg differ
diff --git a/images/bg5.jpg b/images/bg5.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..04d7846748dbb684b50ee52da01916adf6bfa7cc
Binary files /dev/null and b/images/bg5.jpg differ
diff --git a/swiper.htm b/swiper.htm
new file mode 100644
index 0000000000000000000000000000000000000000..a362fe490d5b6823a1dc2981da1308733788ab56
--- /dev/null
+++ b/swiper.htm
@@ -0,0 +1,309 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <style>
+        /* 编辑全局样式 */
+        body,
+        div,
+        ul,
+        p,
+        ol,
+        li,
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6,
+        form,
+        input,
+        fieldset,
+        table,
+        tr,
+        dl,
+        dt,
+        dd,
+        img,
+        span,
+        button,
+        a,
+        textarea,
+        video,
+        fieldset,
+        aside,
+        article,
+        section,
+        main,
+        nav,
+        figcaption,
+        figure,
+        button {
+            margin: 0;
+            padding: 0;
+        }
+
+        li {
+            list-style: none;
+        }
+
+        a {
+            text-decoration: none;
+        }
+
+        input {
+            outline: none;
+            border: 0;
+        }
+
+        button {
+            border: 0;
+            box-sizing: content-box;
+        }
+
+        .clearfix::after {
+            content: "";
+            display: block;
+            clear: both;
+            height: 0;
+            overflow: hidden;
+            visibility: hidden;
+        }
+
+        i {
+            font-style: normal;
+        }
+
+        img {
+            vertical-align: top;
+        }
+
+        /* 编辑轮播图样式 */
+        .swiper {
+            position: relative;
+            background-color: aqua;
+            width: 600px;
+            height: 380px;
+            margin: 50px auto;
+            overflow: hidden;
+            border-radius: 8px;
+        }
+
+        .swiper li img {
+            width: 100%;
+            height: 100%;
+        }
+
+        .swiper ul {
+            width: 600%;
+            margin-left: -600px;
+        }
+
+        .swiper ul li {
+            width: 600px;
+            height: 380px;
+            float: left;
+        }
+
+        .swiper ol li {
+            float: left;
+            width: 12px;
+            height: 12px;
+            border-radius: 6px;
+            margin: 0 3px;
+            transition: all .8s;
+        }
+
+        .swiper ol {
+            position: absolute;
+            bottom: 5px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            justify-content: center;
+        }
+
+        .swiper a {
+            text-align: center;
+            line-height: 48px;
+            color: #fff;
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 24px;
+            height: 48px;
+            background-color: rgba(0, 0, 0, .3);
+        }
+
+        /* 小圆点变色 */
+        .circle-nor {
+            background-color: #fff;
+        }
+
+        .circle-color {
+            width: 16px !important;
+            background-color: orange !important;
+        }
+
+        .pre {
+            display: block;
+            left: 0;
+        }
+
+        .next {
+            display: block;
+            right: 0;
+        }
+    </style>
+
+<body>
+    <div class="swiper">
+        <ul class="clearfix">
+            <li>
+                <img src="./images/bg1.jpg" alt="">
+            </li>
+            <li>
+                <img src="./images/bg2.jpg" alt="">
+            </li>
+            <li>
+                <img src="./images/bg3.jpg" alt="">
+            </li>
+            <li>
+                <img src="./images/bg4.jpg" alt="">
+            </li>
+        </ul>
+        <ol>
+        </ol>
+        <a href="" class="pre">&lt;</a>
+        <a href="" class="next">&gt;</a>
+    </div>
+    <script>
+        let _this = null
+        class swiper {
+            constructor(selector) {
+                _this = this
+                this.box = document.querySelector(selector)
+                this.pre = this.box.querySelector('.pre')
+                this.next = this.box.querySelector('.next')
+                this.ul = this.box.querySelector('ul')
+                this.ol = this.box.querySelector('ol')
+                //图片的序号
+                this.Index = 0
+                //定时器
+                this.timeId = null
+                this.Init()
+            }
+            Init() {
+                this.box.addEventListener('mouseenter', this.mouseenter)
+                this.box.addEventListener('mouseleave', this.mouseleave)
+                this.pointer()
+
+                this.clone()
+                //初始化左右切换
+                this.preswitch()
+                this.nextswitch()
+                //自动播放
+                this.autoplay()
+            }
+            //鼠标移入事件
+            // mouseenter() {
+            //     _this.pre.style.display = 'block'
+            //     _this.next.style.display = 'block'
+            //     //停止定时器
+            //     clearInterval(_this.timeId)
+            // }
+            // mouseleave() {
+            //     _this.pre.style.display = 'none'
+            //     _this.next.style.display = 'none'
+            //     _this.autoplay()
+            // }
+            //小圆点
+            //动态生成小圆点
+            pointer() {
+                for (let i = 0; i < this.ul.children.length; i++) {
+                    let li = document.createElement('li')
+                    li.setAttribute('data-id', i)
+                    this.ol.appendChild(li)
+                    li.classList.add('circle-nor')
+                    this.circle = this.ol.querySelectorAll('li')
+                    this.circle[i].addEventListener('click', function () {
+                        _this.render()
+                        this.classList.add('circle-color')
+                        _this.ul.style.transition = 'all .3s'
+                        _this.ul.style.transform = `translateX(-${_this.ul.children[0].offsetWidth * this.dataset.id}px)`
+                        _this.Index = this.dataset.id
+                    })
+                }
+            }
+
+            //左右箭头切换图片
+            preswitch() {
+                this.pre.addEventListener('click', function (e) {
+                    e.preventDefault()
+                    _this.Index--
+                    _this.ul.style.transition = 'all .3s'
+                    _this.ul.style.transform = `translateX(${- _this.ul.children[0].offsetWidth * (_this.Index)}px)`
+                    //超过阈值处理
+                    console.log(_this.Index);
+                    if (_this.Index == -1) {
+                        _this.Index = 3
+                    }
+                    console.log(_this.Index);
+                    _this.render()
+                    _this.circle[_this.Index].classList.add('circle-color');
+                })
+            }
+            nextswitch() {
+                this.next.addEventListener('click', function (e) {
+                    e.preventDefault()
+                    _this.Index++
+                    _this.ul.style.transition = 'all .3s'
+                    _this.ul.style.transform = `translateX(${-_this.ul.children[0].offsetWidth * _this.Index}px)`
+                    if (_this.Index == 4) {
+                        _this.Index = 0
+                    }
+                    _this.render()
+                    _this.circle[_this.Index].classList.add('circle-color');
+
+                })
+
+            }
+            //设定临界值
+            clone() {
+                let firLi = this.ul.children[0].cloneNode(true)
+                let lastLi = this.ul.children[this.ul.children.length - 1].cloneNode(true)
+                this.ul.appendChild(firLi)
+                this.ul.insertBefore(lastLi, this.ul.children[0])
+                this.ul.addEventListener('transitionend', function () {
+                    console.log(_this.Index);
+                    if (_this.Index == 0 || _this.Index == 3) {
+                        _this.ul.style.transition = 'none'
+                        _this.ul.style.transform = `translateX(-${_this.ul.children[0].offsetWidth * _this.Index}px)`
+
+                    }
+                })
+            }
+            //自动轮播
+            autoplay() {
+                this.timeId = setInterval(function () {
+                    _this.next.click()
+                }, 2500)
+            }
+            //排他渲染小圆点
+            render() {
+                for (let i = 0; i < this.ol.children.length; i++) {
+                    this.circle[i].classList.remove('circle-color')
+                }
+            }
+        }
+        let s = new swiper('.swiper')
+        console.log(s);
+
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/zhouweihang.html b/zhouweihang.html
new file mode 100644
index 0000000000000000000000000000000000000000..7c5c924233d94c7fbd8d496ef7cf8c8a4f36195d
--- /dev/null
+++ b/zhouweihang.html
@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <script>
+        const cityData = [
+            {
+                parentValue: 1,
+                value: 11,
+                label: '北京市',
+            },
+            {
+                parentValue: 11,
+                value: 111,
+                label: '东城区'
+            },
+            {
+                parentValue: 11,
+                value: 112,
+                label: '西城区'
+            },
+            {
+                parentValue: 1,
+                value: 12,
+                label: '上海市',
+            },
+            {
+                parentValue: 12,
+                value: 121,
+                label: '黄浦区'
+            },
+            {
+                parentValue: 12,
+                value: 122,
+                label: '徐汇区'
+            },
+            {
+                parentValue: 1,
+                value: 13,
+                label: '广东省',
+            },
+            {
+                parentValue: 13,
+                value: 131,
+                label: '广州市',
+            },
+            {
+                parentValue: 131,
+                value: 1311,
+                label: '天河区'
+            },
+            {
+                parentValue: 131,
+                value: 1312,
+                label: '越秀区'
+            },
+            {
+                parentValue: 132,
+                value: 1321,
+                label: '南山区'
+            },
+            {
+                parentValue: 132,
+                value: 1322,
+                label: '罗湖区'
+            },
+            {
+                value: 1,
+                label: '中国',
+            },
+            {
+                parentValue: 13,
+                value: 132,
+                label: '深圳市',
+            }
+        ]
+
+        /* *
+         1.请利用递归方法实现一个函数，把上方数据递归成有层级的数据，
+         2.把value字段变成id字段，label字段变成title字段，children字段变成child字段，
+         3.去掉parentValue字段，最终得到以下数据。需要一模一样的数据
+         ⚠️注意：不允许使用三层循环，请使用递归方法
+         [
+            {
+                id: 1,
+                title: '中国',
+                child: [
+                    {
+                        id: 11,
+                        title: '北京市',
+                        child: [
+                            {
+                                id: 111,
+                                title: '东城区'
+                            },
+                            {
+                                id: 112,
+                                title: '西城区'
+                            }
+                        ]
+                    },
+                    {
+                        id: 12,
+                        title: '上海市',
+                        child: [
+                            {
+                                id: 121,
+                                title: '黄浦区'
+                            },
+                            {
+                                id: 122,
+                                title: '徐汇区'
+                            }
+                        ]
+                    },
+                    {
+                        id: 13,
+                        title: '广东省',
+                        child: [
+                            {
+                                id: 131,
+                                title: '广州市',
+                                child: [
+                                    {
+                                        id: 1311,
+                                        title: '天河区'
+                                    },
+                                    {
+                                        id: 1312,
+                                        title: '越秀区'
+                                    }
+                                ]
+                            },
+                            {
+                                id: 132,
+                                title: '深圳市',
+                                child: [
+                                    {
+                                        id: 1321,
+                                        title: '南山区'
+                                    },
+                                    {
+                                        id: 1322,
+                                        title: '罗湖区'
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+         * */
+
+
+        // 具体实现
+        const getArea = (data) => {
+            // 在这里编写代码
+            // 找到根节点（中国的节点）value为1
+            const rootNode = data.find(item => item.value === 1);
+            if (!rootNode) return;
+
+            // 2. 转换根节点格式并添加到结果
+            const root = {
+                id: rootNode.value,
+                title: rootNode.label,
+                child: []
+            };
+            result.push(root);
+
+            // 3. 递归查找子节点
+            const findChildren = (parentId, parentNode) => {
+                // 查找当前父节点下的直接子节点
+                const children = data.filter(item => item.parentValue === parentId);
+
+                // 为每个子节点创建新节点并递归查找其子节点
+                children.forEach(child => {
+                    const newNode = {
+                        id: child.value,
+                        title: child.label,
+                        child: []
+                    };
+
+                    // 将新节点添加到父节点的child数组中
+                    parentNode.child.push(newNode);
+
+                    // 递归查找当前节点的子节点
+                    findChildren(child.value, newNode);
+                });
+            };
+
+            // 从根节点开始递归
+            findChildren(root.id, root);
+
+        }
+        const result = [];
+        getArea(cityData);
+        console.log(result);
+
+    </script>
+</body>
+
+</html>
\ No newline at end of file
