Update index.html

index.html

@@ -1771,13 +1771,11 @@
     100% { transform: scale(1); }
 }
 </style>
-
 <script>
 // 引入Chart.js
 const script = document.createElement('script');
 script.src = 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js';
 document.head.appendChild(script);
-
 script.onload = function() {
     // 雷达图配置
     const ctx = document.getElementById('radarChart').getContext('2d');
@@ -1805,7 +1803,6 @@ script.onload = function() {
             color: '#96ceb4'
         }
     ];
-
     new Chart(ctx, {
         type: 'doughnut',
         data: {
@@ -1859,51 +1856,92 @@ script.onload = function() {
     });
 };
 
-        // 粒子效果配置
-        particlesJS('particles-js', {
-            particles: {
-                number: { value: 80, density: { enable: true, value_area: 800 } },
-                color: { value: '#ffd93d' },
-                shape: { type: 'circle' },
-                opacity: { value: 0.5, random: true },
-                size: { value: 3, random: true },
-                line_linked: {
-                    enable: true,
-                    distance: 150,
-                    color: '#ff6b6b',
-                    opacity: 0.2,
-                    width: 1
-                },
-                move: {
-                    enable: true,
-                    speed: 2,
-                    direction: 'none',
-                    random: true,
-                    straight: false,
-                    out_mode: 'out'
-                }
-            }
-        });
-
-        // 幻灯片切换逻辑
-        let currentSlide = 1;
-        const totalSlides = 16;
-        
-        document.addEventListener('click', () => {
-            document.querySelector(`#slide${currentSlide}`).classList.remove('active');
-            currentSlide = currentSlide === totalSlides ? 1 : currentSlide + 1;
-            document.querySelector(`#slide${currentSlide}`).classList.add('active');
-            updateProgressBar();
-        });
-
-        // 进度条更新
-        function updateProgressBar() {
-            const progress = (currentSlide - 1) / totalSlides * 100;
-            document.querySelector('.progress-bar').style.width = `${progress}%`;
+// 粒子效果配置
+particlesJS('particles-js', {
+    particles: {
+        number: { value: 80, density: { enable: true, value_area: 800 } },
+        color: { value: '#ffd93d' },
+        shape: { type: 'circle' },
+        opacity: { value: 0.5, random: true },
+        size: { value: 3, random: true },
+        line_linked: {
+            enable: true,
+            distance: 150,
+            color: '#ff6b6b',
+            opacity: 0.2,
+            width: 1
+        },
+        move: {
+            enable: true,
+            speed: 2,
+            direction: 'none',
+            random: true,
+            straight: false,
+            out_mode: 'out'
         }
+    }
+});
+
+// 幻灯片切换逻辑
+let currentSlide = 1;
+const totalSlides = 16;
+
+// 切换到指定幻灯片的函数
+function goToSlide(slideNumber) {
+    if (slideNumber < 1 || slideNumber > totalSlides) return;
+    
+    document.querySelector(`#slide${currentSlide}`).classList.remove('active');
+    currentSlide = slideNumber;
+    document.querySelector(`#slide${currentSlide}`).classList.add('active');
+    updateProgressBar();
+}
+
+// 下一张幻灯片
+function nextSlide() {
+    goToSlide(currentSlide === totalSlides ? 1 : currentSlide + 1);
+}
+
+// 上一张幻灯片
+function previousSlide() {
+    goToSlide(currentSlide === 1 ? totalSlides : currentSlide - 1);
+}
+
+// 点击事件处理
+document.addEventListener('click', (event) => {
+    // 获取点击位置
+    const clickX = event.clientX;
+    const windowWidth = window.innerWidth;
+    
+    // 如果点击在屏幕左半边，向前翻页；右半边，向后翻页
+    if (clickX < windowWidth / 2) {
+        previousSlide();
+    } else {
+        nextSlide();
+    }
+});
+
+// 键盘事件处理
+document.addEventListener('keydown', (event) => {
+    switch(event.key) {
+        case 'ArrowLeft':
+        case 'ArrowUp':
+            previousSlide();
+            break;
+        case 'ArrowRight':
+        case 'ArrowDown':
+            nextSlide();
+            break;
+    }
+});
+
+// 进度条更新
+function updateProgressBar() {
+    const progress = (currentSlide - 1) / totalSlides * 100;
+    document.querySelector('.progress-bar').style.width = `${progress}%`;
+}
 
-        // 初始化进度条
-        updateProgressBar();
-    </script>
+// 初始化进度条
+updateProgressBar();
+</script>
 </body>
 </html>