diff --git a/images/1.jpg b/images/1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..430f101747c622394a01593c26b30d4f3b054954
Binary files /dev/null and b/images/1.jpg differ
diff --git a/images/2.jpg b/images/2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..0122f42032ee9c00fb01506f6425e21919badf35
Binary files /dev/null and b/images/2.jpg differ
diff --git a/images/3.jpg b/images/3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e12ef278261d72363ca92fc9ab7b41fbe72f4ee9
Binary files /dev/null and b/images/3.jpg differ
diff --git a/images/4.jpg b/images/4.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..31961230eabbb888ab4c4476d4c229b60bc874b7
Binary files /dev/null and b/images/4.jpg differ
diff --git a/wenzijun.html b/wenzijun.html
new file mode 100644
index 0000000000000000000000000000000000000000..433a1cafd29f93a5cafb43ca5c74cfb037f72d84
--- /dev/null
+++ b/wenzijun.html
@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>轮播图</title>
+</head>
+<style lang="scss">
+    .container {
+        width: 80vw;
+        height: 40vw;
+        overflow: hidden;
+        margin: 0 auto;
+        position: relative;
+    }
+
+    .carousel {
+        --index: 0;
+        width: 480vw;
+        height: 40vw;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        transform: translateX(calc(var(--index) * -80vw));
+        position: absolute;
+        left: -80vw;
+    }
+
+    .item img {
+        width: 80vw;
+        height: 100%;
+
+    }
+
+    .left {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 30px;
+        height: 50px;
+        background-color: rgba(0, 0, 0, 0.5);
+        color: #fff;
+        font-size: 20px;
+        text-align: center;
+        line-height: 50px;
+        cursor: pointer;
+        user-select: none;
+    }
+
+    .right {
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 30px;
+        height: 50px;
+        background-color: rgba(0, 0, 0, 0.5);
+        color: #fff;
+        font-size: 20px;
+        text-align: center;
+        line-height: 50px;
+        cursor: pointer;
+        user-select: none;
+    }
+
+    .points {
+        position: absolute;
+        bottom: 10px;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .point {
+        width: 10px;
+        height: 10px;
+        border-radius: 5px;
+        background-color: #fff;
+        margin: 0 5px;
+        cursor: pointer;
+        transition: 0.5s all ease;
+
+        &.active {
+            background-color: red;
+            width: 20px;
+        }
+    }
+</style>
+
+<body>
+    <div class="container">
+        <div class="carousel">
+            <div class="item"><a href="#"><img src="./images/4.jpg" alt=""></a></div>
+            <div class="item"><a href="#"><img src="./images/1.jpg" alt=""></a></div>
+            <div class="item"><a href="#"><img src="./images/2.jpg" alt=""></a></div>
+            <div class="item"><a href="#"><img src="./images/3.jpg" alt=""></a></div>
+            <div class="item"><a href="#"><img src="./images/4.jpg" alt=""></a></div>
+            <div class="item"><a href="#"><img src="./images/1.jpg" alt=""></a></div>
+        </div>
+        <div class="left">&lt;</div>
+        <div class="right">&gt;</div>
+        <div class="points">
+            <div class="point active"></div>
+            <div class="point"></div>
+            <div class="point"></div>
+            <div class="point"></div>
+        </div>
+    </div>
+
+</body>
+
+</html>
+
+<script>
+    const carousel = document.querySelector('.carousel');
+    const container = document.querySelector('.container');
+    const left = document.querySelector('.left');
+    const right = document.querySelector('.right');
+    const points = document.querySelector('.points');
+    const point = document.querySelectorAll('.point');
+    let index = 0;
+    let timer = null;
+    let isMoving = false;
+
+
+    function moveTo(index) {
+        carousel.setAttribute('style', `--index:${index}`);
+        carousel.style.transition = '0.5s all ease';
+    }
+    function moveLeft() {
+        index--;
+        if (index < 0) {
+            index = 3;
+            carousel.style.transition = 'none';
+            carousel.setAttribute('style', `--index:${index + 1}`);
+            carousel.clientWidth;//触发重绘
+        }
+        moveTo(index);
+        pointActive(index);
+    }
+    function moveRight() {
+        index++;
+        if (index > 3) {
+            index = 0;
+            carousel.style.transition = 'none';
+            carousel.setAttribute('style', `--index:${index - 1}`);
+            carousel.clientWidth;//触发重绘
+        }
+        moveTo(index);
+        pointActive(index);
+    }
+    function autoMove() {
+        timer = setInterval(() => {
+            moveRight();
+        }, 2000);
+    }
+    autoMove();
+
+    function pointActive(index) {
+        document.querySelector('.point.active').classList.remove('active');
+        point[index].classList.add('active');
+    }
+    left.addEventListener('click', () => {
+        moveLeft();
+    })
+    right.addEventListener('click', () => {
+        moveRight();
+    })
+    points.addEventListener('click', (e) => {
+        if (!e.target.classList.contains('point')) {
+            return;
+        }
+        point.forEach((item, i) => {
+            if (item === e.target) {
+                index = i;
+            }
+        })
+        pointActive(index)
+        moveTo(index);
+    })
+
+    container.addEventListener('mouseenter', () => {
+        clearInterval(timer);
+    });
+    container.addEventListener('mouseleave', () => {
+        autoMove()
+    });
+
+    
+
+
+
+</script>
+<script src="wenzijun.js"></script>
\ No newline at end of file
diff --git a/wenzijun.js b/wenzijun.js
new file mode 100644
index 0000000000000000000000000000000000000000..f736ba672777d71881583a46e25e928752b6a725
--- /dev/null
+++ b/wenzijun.js
@@ -0,0 +1,113 @@
+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: '深圳市',
+    }
+]
+
+const getArea = (data) => {
+    function buildTree(data, parentValue = null) {
+        const tree = [];
+        for (const item of data) {
+            if (item.parentValue == parentValue) {
+                const children = buildTree(data, item.value);
+                if (children.length) {
+                    item.children = children;
+                }
+                tree.push(item);
+            }
+        }
+        return tree;
+    }
+    function reName(data) {
+        for (const item of data) {
+            if (item.children) {
+                item.child = item.children;
+                delete item.children;
+                reName(item.child);
+            } 
+            if (item.parentValue)
+                delete item.parentValue;
+            item.title = item.label;
+            item.id = item.value;
+            delete item.label;
+            delete item.value;
+        }
+        return data;
+    }
+   
+    
+    result.push(reName(buildTree(data)));
+}
+
+
+
+const result = [];
+getArea(cityData);
+console.log(result);
+
