diff --git a/css/index.css b/css/index.css index d15521e..5492e4e 100644 --- a/css/index.css +++ b/css/index.css @@ -2696,142 +2696,31 @@ html { display: none; } -/* 下层:幻灯片容器 - 左中右三栏布局 */ +/* 下层:幻灯片容器 */ .solution-slider { position: relative; min-height: 450px; - perspective: 1500px; - overflow: visible; + overflow: hidden; } -/* 单个幻灯片 - 默认隐藏 */ +/* 单个幻灯片 */ .solution-slide { position: absolute; top: 0; - left: 50%; + left: 0; width: 100%; opacity: 0; - transform: translateX(-50%) scale(0.7); - transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); + transition: opacity 0.6s ease; pointer-events: none; z-index: 1; } -/* 中间激活的主卡片 */ +/* 激活的幻灯片 */ .solution-slide.active { position: relative; - left: 0; opacity: 1; - transform: translateX(0) scale(1); pointer-events: auto; - z-index: 10; -} - -/* 左侧卡片 - 上一张的预览 */ -.solution-slide.prev { - position: absolute; - left: 0; - opacity: 0.5; - transform: translateX(-55%) scale(0.85); - pointer-events: none; - z-index: 5; - filter: brightness(0.7); -} - -/* 右侧卡片 - 下一张的预览 */ -.solution-slide.next { - position: absolute; - left: auto; - right: 0; - opacity: 0.5; - transform: translateX(55%) scale(0.85); - pointer-events: none; - z-index: 5; - filter: brightness(0.7); -} - -/* 切换动画 - 从右到中 */ -.solution-slide.slide-to-center { - animation: slideFromRightToCenter 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; - z-index: 11; -} - -@keyframes slideFromRightToCenter { - from { - left: auto; - right: 0; - opacity: 0.5; - transform: translateX(55%) scale(0.85); - filter: brightness(0.7); - } - to { - left: 0; - right: auto; - opacity: 1; - transform: translateX(0) scale(1); - filter: brightness(1); - } -} - -/* 切换动画 - 从中到左 */ -.solution-slide.slide-to-left { - animation: slideFromCenterToLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; - z-index: 9; -} - -@keyframes slideFromCenterToLeft { - from { - left: 0; - opacity: 1; - transform: translateX(0) scale(1); - filter: brightness(1); - } - to { - left: 0; - opacity: 0.5; - transform: translateX(-55%) scale(0.85); - filter: brightness(0.7); - } -} - -/* 切换动画 - 从左消失 */ -.solution-slide.slide-out-left { - animation: slideOutToLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; - z-index: 3; -} - -@keyframes slideOutToLeft { - from { - left: 0; - opacity: 0.5; - transform: translateX(-55%) scale(0.85); - } - to { - left: 0; - opacity: 0; - transform: translateX(-80%) scale(0.7); - } -} - -/* 切换动画 - 从右侧外进入到右侧位置 */ -.solution-slide.slide-in-right { - animation: slideInFromRight 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; - z-index: 4; -} - -@keyframes slideInFromRight { - from { - left: auto; - right: 0; - opacity: 0; - transform: translateX(80%) scale(0.7); - } - to { - left: auto; - right: 0; - opacity: 0.5; - transform: translateX(55%) scale(0.85); - } + z-index: 2; } /* 幻灯片内容区域 */ diff --git a/js/index.js b/js/index.js index 636e30e..e95dce0 100644 --- a/js/index.js +++ b/js/index.js @@ -269,83 +269,26 @@ $(function () { const totalSlides = $slides.length; let currentIndex = 0; let autoPlayTimer = null; - let isAnimating = false; const autoPlayDuration = 3000; // 3秒自动切换 - // 获取循环索引 - function getCircularIndex(index) { - return ((index % totalSlides) + totalSlides) % totalSlides; - } - - // 更新所有幻灯片的位置状态(左中右) - function updateSlidePositions() { - const prevIndex = getCircularIndex(currentIndex - 1); - const nextIndex = getCircularIndex(currentIndex + 1); - - $slides.each(function(index) { - const $slide = $(this); - - // 移除所有位置类 - $slide.removeClass('active prev next slide-to-center slide-to-left slide-out-left slide-in-right'); - - if (index === currentIndex) { - // 中间主卡片 - $slide.addClass('active'); - } else if (index === prevIndex) { - // 左侧预览卡片 - $slide.addClass('prev'); - } else if (index === nextIndex) { - // 右侧预览卡片 - $slide.addClass('next'); - } - // 其他卡片保持隐藏状态 - }); - } - // 切换到指定幻灯片 function switchSlide(index) { - if (index === currentIndex || isAnimating) return; + if (index === currentIndex) return; - isAnimating = true; - - const oldIndex = currentIndex; - const newIndex = index; - const prevOldIndex = getCircularIndex(oldIndex - 1); - const nextNewIndex = getCircularIndex(newIndex + 1); - - // 移除所有动画类 - $slides.removeClass('slide-to-center slide-to-left slide-out-left slide-in-right'); - - // 应用切换动画 - // 右侧卡片 -> 中间 - $slides.eq(newIndex).removeClass('next').addClass('slide-to-center'); - - // 中间卡片 -> 左侧 - $slides.eq(oldIndex).removeClass('active').addClass('slide-to-left'); - - // 左侧卡片 -> 消失 - $slides.eq(prevOldIndex).removeClass('prev').addClass('slide-out-left'); - - // 新的右侧卡片进入 - $slides.eq(nextNewIndex).addClass('slide-in-right'); + // 更新幻灯片 + $slides.removeClass('active'); + $slides.eq(index).addClass('active'); // 更新按钮 $tabs.removeClass('active'); - $tabs.eq(newIndex).addClass('active'); + $tabs.eq(index).addClass('active'); - // 更新当前索引 - currentIndex = newIndex; - - // 等待动画完成后更新状态 - setTimeout(function() { - updateSlidePositions(); - isAnimating = false; - }, 600); // 与动画时间一致 + currentIndex = index; } // 切换到下一张 function nextSlide() { - const nextIndex = getCircularIndex(currentIndex + 1); + const nextIndex = (currentIndex + 1) % totalSlides; switchSlide(nextIndex); } @@ -382,7 +325,6 @@ $(function () { // 初始化 if (totalSlides > 0) { - updateSlidePositions(); startAutoPlay(); } })();