From f0b8403a4d813baa519c07d7175f39b78fda7829 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?qz=E5=BD=B1=E6=9C=88?=
 <14800590+qz-shadow-moon@user.noreply.gitee.com>
Date: Wed, 4 Jun 2025 09:09:24 +0000
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: qz影月 <14800590+qz-shadow-moon@user.noreply.gitee.com>
---
 qianzhen.html | 500 ++++++++++++++++++++++++++++++++++++++++++++++++++
 qianzhen.js   | 112 +++++++++++
 2 files changed, 612 insertions(+)
 create mode 100644 qianzhen.html
 create mode 100644 qianzhen.js
diff --git a/qianzhen.html b/qianzhen.html
new file mode 100644
index 0000000..232f979
--- /dev/null
+++ b/qianzhen.html
@@ -0,0 +1,500 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>原生JS轮播图</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 100vh;
+      color: #fff;
+      padding: 20px;
+    }
+
+    .container {
+      max-width: 1000px;
+      width: 100%;
+      text-align: center;
+    }
+
+    h1 {
+      font-size: 2.8rem;
+      margin-bottom: 10px;
+      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+    }
+
+    .subtitle {
+      font-size: 1.2rem;
+      margin-bottom: 40px;
+      opacity: 0.9;
+    }
+
+    .slider-container {
+      position: relative;
+      width: 100%;
+      max-width: 800px;
+      height: 450px;
+      margin: 0 auto;
+      overflow: hidden;
+      border-radius: 15px;
+      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
+    }
+
+    .slides {
+      display: flex;
+      height: 100%;
+      transition: transform 0.5s ease-in-out;
+    }
+
+    .slide {
+      min-width: 100%;
+      height: 100%;
+      position: relative;
+    }
+
+    .slide img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+
+    .slide-content {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
+      padding: 25px 20px;
+      text-align: left;
+    }
+
+    .slide-title {
+      font-size: 1.8rem;
+      margin-bottom: 8px;
+    }
+
+    .slide-description {
+      font-size: 1rem;
+      opacity: 0.9;
+    }
+
+    .arrow {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 50px;
+      height: 50px;
+      background-color: rgba(255, 255, 255, 0.2);
+      border-radius: 50%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      font-size: 24px;
+      transition: all 0.3s ease;
+      z-index: 10;
+      backdrop-filter: blur(5px);
+      border: 1px solid rgba(255, 255, 255, 0.3);
+    }
+
+    .arrow:hover {
+      background-color: rgba(255, 255, 255, 0.35);
+      transform: translateY(-50%) scale(1.05);
+    }
+
+    .arrow-left {
+      left: 20px;
+    }
+
+    .arrow-right {
+      right: 20px;
+    }
+
+    .dots {
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      gap: 10px;
+      z-index: 10;
+    }
+
+    .dot {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background-color: rgba(255, 255, 255, 0.5);
+      cursor: pointer;
+      transition: all 0.3s ease;
+    }
+
+    .dot.active {
+      background-color: #fff;
+      transform: scale(1.2);
+    }
+
+    .controls {
+      margin-top: 30px;
+      display: flex;
+      justify-content: center;
+      gap: 20px;
+    }
+
+    .btn {
+      background: rgba(255, 255, 255, 0.2);
+      border: none;
+      border-radius: 30px;
+      padding: 12px 25px;
+      color: white;
+      font-size: 1rem;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      backdrop-filter: blur(5px);
+      border: 1px solid rgba(255, 255, 255, 0.3);
+    }
+
+    .btn:hover {
+      background: rgba(255, 255, 255, 0.35);
+      transform: translateY(-2px);
+    }
+
+    .features {
+      display: flex;
+      justify-content: center;
+      flex-wrap: wrap;
+      gap: 30px;
+      margin-top: 40px;
+    }
+
+    .feature-card {
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 15px;
+      padding: 25px;
+      width: 220px;
+      backdrop-filter: blur(5px);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      transition: transform 0.3s ease;
+    }
+
+    .feature-card:hover {
+      transform: translateY(-10px);
+    }
+
+    .feature-card i {
+      font-size: 2.5rem;
+      margin-bottom: 15px;
+      display: block;
+    }
+
+    .feature-card h3 {
+      font-size: 1.3rem;
+      margin-bottom: 10px;
+    }
+
+    .feature-card p {
+      opacity: 0.8;
+      font-size: 0.95rem;
+    }
+
+    @media (max-width: 768px) {
+      .slider-container {
+        height: 350px;
+      }
+
+      h1 {
+        font-size: 2.2rem;
+      }
+
+      .slide-title {
+        font-size: 1.5rem;
+      }
+    }
+
+    @media (max-width: 480px) {
+      .slider-container {
+        height: 300px;
+      }
+
+      h1 {
+        font-size: 1.8rem;
+      }
+
+      .arrow {
+        width: 40px;
+        height: 40px;
+        font-size: 18px;
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <div class="container">
+    <h1>原生JS轮播图</h1>
+    <p class="subtitle">纯JavaScript实现，无任何框架依赖</p>
+
+    <div class="slider-container">
+      <div class="slides">
+        <!-- 幻灯片内容由JS动态生成 -->
+      </div>
+
+      <!-- 左右箭头 -->
+      <div class="arrow arrow-left">❮</div>
+      <div class="arrow arrow-right">❯</div>
+
+      <!-- 小圆点指示器 -->
+      <div class="dots"></div>
+    </div>
+
+    <div class="controls">
+      <button class="btn" id="prevBtn">上一张</button>
+      <button class="btn" id="toggleBtn">暂停轮播</button>
+      <button class="btn" id="nextBtn">下一张</button>
+    </div>
+
+    <div class="features">
+      <div class="feature-card">
+        <div>🔄</div>
+        <h3>无限轮播</h3>
+        <p>首尾无缝衔接，循环播放不停歇</p>
+      </div>
+      <div class="feature-card">
+        <div>⏱️</div>
+        <h3>自动播放</h3>
+        <p>智能计时器自动切换，可随时暂停</p>
+      </div>
+      <div class="feature-card">
+        <div>↔️</div>
+        <h3>箭头控制</h3>
+        <p>左右箭头实现精确的手动控制</p>
+      </div>
+      <div class="feature-card">
+        <div>⭕</div>
+        <h3>圆点导航</h3>
+        <p>点击圆点可快速跳转到指定图片</p>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      // 轮播图数据
+      const slidesData = [
+        {
+          image: './image.png',
+          title: '壮丽山脉',
+          description: '白雪覆盖的山峰在日出时分展现出壮丽的景色'
+        },
+        {
+          image: './image.png',
+          title: '迷雾森林',
+          description: '晨雾中的森林，神秘而宁静的自然风光'
+        },
+        {
+          image: './image.png',
+          title: '金色麦田',
+          description: '夕阳下金色的麦田，丰收的季节总是令人愉悦'
+        },
+        {
+          image: './image.png',
+          title: '清澈湖泊',
+          description: '如镜面般的湖泊倒映着蓝天和雪山'
+        }
+      ];
+
+      // 获取DOM元素
+      const slidesContainer = document.querySelector('.slides');
+      const dotsContainer = document.querySelector('.dots');
+      const prevBtn = document.getElementById('prevBtn');
+      const nextBtn = document.getElementById('nextBtn');
+      const toggleBtn = document.getElementById('toggleBtn');
+      const arrowLeft = document.querySelector('.arrow-left');
+      const arrowRight = document.querySelector('.arrow-right');
+
+      // 轮播图状态
+      let currentIndex = 1; // 当前显示的幻灯片索引（从1开始）
+      let slideCount = slidesData.length;
+      let slideWidth = document.querySelector('.slider-container').offsetWidth;
+      let autoPlayInterval;
+      let isPlaying = true;
+
+      // 初始化轮播图
+      function initSlider() {
+        // 创建幻灯片
+        // 在开头添加最后一个幻灯片的克隆
+        slidesContainer.appendChild(createSlide(slidesData[slideCount - 1]));
+
+        // 添加所有幻灯片
+        slidesData.forEach((slide, index) => {
+          slidesContainer.appendChild(createSlide(slide, index));
+        });
+
+        // 在结尾添加第一个幻灯片的克隆
+        slidesContainer.appendChild(createSlide(slidesData[0]));
+
+        // 创建小圆点
+        slidesData.forEach((_, index) => {
+          const dot = document.createElement('div');
+          dot.classList.add('dot');
+          if (index === 0) dot.classList.add('active');
+          dot.dataset.index = index;
+          dotsContainer.appendChild(dot);
+        });
+
+        // 设置初始位置
+        slidesContainer.style.transform = `translateX(-${slideWidth}px)`;
+
+        // 启动自动播放
+        startAutoPlay();
+      }
+
+      // 创建幻灯片元素
+      function createSlide(data, index) {
+        const slide = document.createElement('div');
+        slide.classList.add('slide');
+
+        slide.innerHTML = `
+                    <img src="${data.image}" alt="${data.title}">
+                    <div class="slide-content">
+                        <h2 class="slide-title">${data.title}</h2>
+                        <p class="slide-description">${data.description}</p>
+                    </div>
+                `;
+
+        return slide;
+      }
+
+      // 切换到指定幻灯片
+      function goToSlide(index, animate = true) {
+        if (!animate) {
+          slidesContainer.style.transition = 'none';
+        } else {
+          slidesContainer.style.transition = 'transform 0.5s ease-in-out';
+        }
+
+        slidesContainer.style.transform = `translateX(-${slideWidth * (index)}px)`;
+        currentIndex = index;
+
+        // 更新小圆点状态
+        updateDots();
+      }
+
+      // 更新小圆点状态
+      function updateDots() {
+        const dots = document.querySelectorAll('.dot');
+        let activeIndex;
+
+        if (currentIndex === 0) {
+          activeIndex = slideCount - 1;
+        } else if (currentIndex === slideCount + 1) {
+          activeIndex = 0;
+        } else {
+          activeIndex = currentIndex - 1;
+        }
+
+        dots.forEach((dot, index) => {
+          if (index === activeIndex) {
+            dot.classList.add('active');
+          } else {
+            dot.classList.remove('active');
+          }
+        });
+      }
+
+      // 下一张幻灯片
+      function nextSlide() {
+        if (currentIndex >= slideCount + 1) {
+          // 如果到达克隆的第一张，无动画跳转到真实的第一张
+          goToSlide(1, false);
+        } else {
+          goToSlide(currentIndex + 1);
+        }
+      }
+
+      // 上一张幻灯片
+      function prevSlide() {
+        if (currentIndex <= 0) {
+          // 如果到达克隆的最后一张，无动画跳转到真实的最后一张
+          goToSlide(slideCount, false);
+        } else {
+          goToSlide(currentIndex - 1);
+        }
+      }
+
+      // 开始自动播放
+      function startAutoPlay() {
+        if (autoPlayInterval) clearInterval(autoPlayInterval);
+        autoPlayInterval = setInterval(nextSlide, 3000);
+        isPlaying = true;
+        toggleBtn.textContent = '暂停轮播';
+      }
+
+      // 停止自动播放
+      function stopAutoPlay() {
+        clearInterval(autoPlayInterval);
+        isPlaying = false;
+        toggleBtn.textContent = '开始轮播';
+      }
+
+      // 处理过渡结束事件
+      function handleTransitionEnd() {
+        // 检查是否在克隆的幻灯片上
+        if (currentIndex === slideCount + 1) {
+          goToSlide(1, false); // 无动画跳转到真实的第一张
+        } else if (currentIndex === 0) {
+          goToSlide(slideCount, false); // 无动画跳转到真实的最后一张
+        }
+      }
+
+      // 窗口大小改变时重新计算
+      function handleResize() {
+        slideWidth = document.querySelector('.slider-container').offsetWidth;
+        goToSlide(currentIndex, false);
+      }
+
+      // 事件监听
+      slidesContainer.addEventListener('transitionend', handleTransitionEnd);
+      prevBtn.addEventListener('click', prevSlide);
+      nextBtn.addEventListener('click', nextSlide);
+      arrowLeft.addEventListener('click', prevSlide);
+      arrowRight.addEventListener('click', nextSlide);
+      window.addEventListener('resize', handleResize);
+
+      // 小圆点点击事件
+      dotsContainer.addEventListener('click', function (e) {
+        if (e.target.classList.contains('dot')) {
+          const index = parseInt(e.target.dataset.index) + 1;
+          goToSlide(index);
+        }
+      });
+
+      // 切换自动播放状态
+      toggleBtn.addEventListener('click', function () {
+        if (isPlaying) {
+          stopAutoPlay();
+        } else {
+          startAutoPlay();
+        }
+      });
+
+      // 初始化轮播图
+      initSlider();
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/qianzhen.js b/qianzhen.js
new file mode 100644
index 0000000..055c8a4
--- /dev/null
+++ b/qianzhen.js
@@ -0,0 +1,112 @@
+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) => {
+  // 在这里编写代码
+  // 辅助函数：递归构建树节点
+  const buildTree = (parentId) => {
+    const children = [];
+    // 查找当前父节点的所有直接子节点
+    for (const item of data) {
+      if (item.parentValue === parentId) {
+        // 创建新节点（转换字段名）
+        const node = {
+          id: item.value,
+          title: item.label
+        };
+        // 递归构建子节点
+        const childNodes = buildTree(item.value);
+        if (childNodes.length > 0) {
+          node.child = childNodes;
+        }
+        children.push(node);
+      }
+    }
+    return children;
+  };
+
+  // 查找根节点（没有 parentValue 的节点）
+  const rootNode = data.find(item => item.parentValue === undefined);
+  if (rootNode) {
+    // 构建根节点
+    const root = {
+      id: rootNode.value,
+      title: rootNode.label,
+      child: buildTree(rootNode.value)
+    };
+    result.push(root);
+  }
+}
+const result = [];
+getArea(cityData);
+console.log(result);
-- 
Gitee

