diff --git a/dsLightRag/static/Menhu/index.html b/dsLightRag/static/Menhu/index.html index c0c47bdb..d6a5c736 100644 --- a/dsLightRag/static/Menhu/index.html +++ b/dsLightRag/static/Menhu/index.html @@ -192,13 +192,104 @@ box-shadow: var(--shadow); animation: float 6s ease-in-out infinite; } - + + /* 轮播图样式 */ + .carousel-container { + position: relative; + width: 100%; + height: 100%; + } + + .carousel { + width: 100%; + height: 100%; + position: relative; + } + + .carousel-item { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 80px; + opacity: 0; + transition: opacity 0.5s ease-in-out; + } + + .carousel-item.active { + opacity: 1; + z-index: 10; + } + + /* 轮播控制按钮 */ + .carousel-control { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 50px; + height: 50px; + border-radius: 50%; + background-color: rgba(255, 255, 255, 0.8); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.3s ease; + z-index: 20; + color: var(--primary-blue); + font-size: 24px; + } + + .carousel-control:hover { + background-color: var(--white); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + transform: translateY(-50%) scale(1.1); + } + + .carousel-control.prev { + left: 20px; + } + + .carousel-control.next { + right: 20px; + } + + /* 轮播指示点 */ + .carousel-indicators { + position: absolute; + bottom: 30px; + left: 50%; + transform: translateX(-50%); + display: flex; + gap: 10px; + z-index: 20; + } + + .carousel-indicator { + width: 12px; + height: 12px; + border-radius: 50%; + background-color: rgba(255, 255, 255, 0.5); + cursor: pointer; + transition: all 0.3s ease; + } + + .carousel-indicator.active { + background-color: var(--white); + width: 30px; + border-radius: 6px; + } + @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } } - + /* 波浪背景 - 使用CSS替代图片 */ .wave { position: absolute; @@ -574,18 +665,69 @@
-
-

让AI成为教育新基建

-

资源共建 · 名师云课 · AI学伴 · 精准学情

-
- - - + -
- - 东师理想AI教育云平台
@@ -726,6 +868,73 @@ this.classList.add('active'); }); }); + + // 轮播图功能 + const carouselItems = document.querySelectorAll('.carousel-item'); + const carouselIndicators = document.querySelectorAll('.carousel-indicator'); + const prevBtn = document.querySelector('.carousel-control.prev'); + const nextBtn = document.querySelector('.carousel-control.next'); + let currentIndex = 0; + let interval; + + // 初始化轮播 + function initCarousel() { + // 启动自动轮播 + startCarousel(); + + // 绑定控制按钮事件 + prevBtn.addEventListener('click', prevSlide); + nextBtn.addEventListener('click', nextSlide); + + // 绑定指示点事件 + carouselIndicators.forEach((indicator, index) => { + indicator.addEventListener('click', () => { + goToSlide(index); + }); + }); + + // 鼠标悬停时暂停轮播 + const carousel = document.querySelector('.carousel'); + carousel.addEventListener('mouseenter', pauseCarousel); + carousel.addEventListener('mouseleave', startCarousel); + } + + // 显示指定幻灯片 + function goToSlide(index) { + // 移除当前激活状态 + carouselItems[currentIndex].classList.remove('active'); + carouselIndicators[currentIndex].classList.remove('active'); + + // 更新索引 + currentIndex = (index + carouselItems.length) % carouselItems.length; + + // 添加新激活状态 + carouselItems[currentIndex].classList.add('active'); + carouselIndicators[currentIndex].classList.add('active'); + } + + // 下一张幻灯片 + function nextSlide() { + goToSlide(currentIndex + 1); + } + + // 上一张幻灯片 + function prevSlide() { + goToSlide(currentIndex - 1); + } + + // 暂停轮播 + function pauseCarousel() { + clearInterval(interval); + } + + // 开始轮播 + function startCarousel() { + interval = setInterval(nextSlide, 5000); + } + + // 初始化轮播 + initCarousel(); });