featuredDropdown.classList.add('hidden');
featuredDropdown.classList.remove('desktop-dropdown');
featuredDropdown.classList.add('mobile-dropdown');
}
} else {
navMenu.classList.remove('flex-col');
// 恢复大屏横向gap
navMenu.classList.add('gap-0');
navMenu.classList.remove('gap-1');
}
}
// 绑定汉堡按钮点击事件
hamburgerBtn.addEventListener('click', toggleNavMenu);
// 移动端二级菜单切换
function toggleMobileDropdown(e) {
if (window.innerWidth < 640) {
e.preventDefault(); // 阻止默认跳转
featuredDropdown.classList.toggle('hidden');
// 切换下拉箭头方向
const arrow = featuredLink.querySelector('i');
if (featuredDropdown.classList.contains('hidden')) {
arrow.classList.remove('fa-chevron-up');
arrow.classList.add('fa-chevron-down');
} else {
arrow.classList.remove('fa-chevron-down');
arrow.classList.add('fa-chevron-up');
}
}
}
// 绑定Featured链接点击事件（移动端二级菜单）
featuredLink.addEventListener('click', toggleMobileDropdown);
// 点击导航菜单项（移动端）关闭菜单
const navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(link => {
// 排除Featured主链接（避免点击后关闭整个菜单）
if (link !== featuredLink) {
link.addEventListener('click', () => {
if (window.innerWidth < 640) { // 小屏设备
navMenu.classList.add('hidden');
hamburgerBtn.classList.remove('hamburger-active');
navMenu.classList.remove('flex-col', 'gap-1');
navMenu.classList.add('gap-0');
// 关闭二级菜单
featuredDropdown.classList.add('hidden');
const arrow = featuredLink.querySelector('i');
arrow.classList.remove('fa-chevron-up');
arrow.classList.add('fa-chevron-down');
}
});
}
});
// 窗口大小变化时重置导航样式
window.addEventListener('resize', () => {
if (window.innerWidth >= 640) { // 大屏设备
navMenu.classList.remove('hidden', 'flex-col', 'gap-1');
navMenu.classList.add('flex', 'gap-0');
hamburgerBtn.classList.remove('hamburger-active');
// 大屏恢复桌面端二级菜单样式
featuredDropdown.classList.remove('hidden', 'mobile-dropdown');
featuredDropdown.classList.add('desktop-dropdown');
// 恢复箭头方向
const arrow = featuredLink.querySelector('i');
arrow.classList.remove('fa-chevron-up');
arrow.classList.add('fa-chevron-down');
} else { // 小屏设备
// 小屏默认隐藏导航菜单
navMenu.classList.add('hidden');
navMenu.classList.remove('flex', 'gap-0');
// 小屏隐藏二级菜单
featuredDropdown.classList.add('hidden');
featuredDropdown.classList.remove('desktop-dropdown');
featuredDropdown.classList.add('mobile-dropdown');
}
});
// 1. 获取DOM元素
const bannerWrap = document.getElementById('bannerWrap');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const bannerItems = document.querySelectorAll('.banner-item');
const totalItems = bannerItems.length;
let currentIndex = 0;
let autoPlayTimer = null;
// 2. 初始化：启动自动轮播（修复核心：复用CSS动画时长，不覆盖行内样式）
initAutoPlay();
// 3. 左侧按钮点击事件：切换到上一张
prevBtn.addEventListener('click', () => {
pauseAutoPlay();
currentIndex = (currentIndex - 1 + totalItems) % totalItems;
updateBanner();
initAutoPlay(); // 重启自动轮播
});
// 4. 右侧按钮点击事件：切换到下一张
nextBtn.addEventListener('click', () => {
pauseAutoPlay();
currentIndex = (currentIndex + 1) % totalItems;
updateBanner();
initAutoPlay(); // 重启自动轮播
});
// 5. 鼠标移入Banner：暂停自动轮播和动画
bannerWrap.addEventListener('mouseenter', () => {
pauseAutoPlay();
bannerItems.forEach(item => item.classList.add('paused'));
});
// 6. 鼠标移出Banner：恢复自动轮播和动画
bannerWrap.addEventListener('mouseleave', () => {
initAutoPlay();
bannerItems.forEach(item => item.classList.remove('paused'));
});
// 核心函数：更新轮播展示（修复核心：用类名切换，不直接修改行内样式）
function updateBanner() {
bannerItems.forEach((item, index) => {
// 移除所有项的激活/未激活类，暂停动画
item.classList.remove('active', 'inactive');
item.classList.add('paused');
// 给当前索引项添加激活类，其他添加未激活类
if (index === currentIndex) {
item.classList.add('active');
} else {
item.classList.add('inactive');
}
});
}
// 辅助函数：启动/重启自动轮播（修复核心：与CSS动画时长同步，无冲突）
function initAutoPlay() {
clearInterval(autoPlayTimer); // 清除原有定时器，防止重复
// 5秒切换一次（与CSS动画中每张图展示时长一致）
autoPlayTimer = setInterval(() => {
currentIndex = (currentIndex + 1) % totalItems;
updateBanner();
// 切换后恢复动画（避免定时器轮播后动画一直暂停）
bannerItems.forEach(item => item.classList.remove('paused'));
}, 5000);
}
// 辅助函数：暂停自动轮播
function pauseAutoPlay() {
clearInterval(autoPlayTimer);
}
// ===================== 初始化 =====================
startAutoPlay();
updateCarousel();
// 初始化导航样式（适配当前窗口大小）
if (window.innerWidth >= 640) {
navMenu.classList.remove('hidden');
navMenu.classList.add('flex', 'gap-0');
navMenu.classList.remove('flex-col', 'gap-1');
featuredDropdown.classList.add('desktop-dropdown');
featuredDropdown.classList.remove('mobile-dropdown');
} else {
navMenu.classList.add('hidden');
navMenu.classList.remove('flex', 'gap-0');
featuredDropdown.classList.add('mobile-dropdown');
featuredDropdown.classList.remove('desktop-dropdown');
}