document.addEventListener('DOMContentLoaded', function() {
  // 获取轮播图相关元素
  const container = document.querySelector('.swipper-container');
  const slides = document.querySelectorAll('.swipper-slide');
  const prevBtn = document.querySelector('.prev');
  const nextBtn = document.querySelector('.next');
  const points = document.querySelectorAll('.point');
  
  let currentIndex = 0;
  const slideCount = slides.length;
  
  // 更新轮播图显示
  function updateSlide() {
    // 移动容器到当前索引位置
    container.style.transform = `translateX(-${currentIndex * 25}%)`;
    
    // 更新指示点状态
    points.forEach((point, index) => {
      if(index === currentIndex) {
        point.style.backgroundColor = '#fff';
      } else {
        point.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
      }
    });
  }
  
  // 下一张
  function nextSlide() {
    currentIndex = (currentIndex + 1) % slideCount;
    updateSlide();
  }
  
  // 上一张
  function prevSlide() {
    currentIndex = (currentIndex - 1 + slideCount) % slideCount;
    updateSlide();
  }
  
  // 绑定按钮事��
  nextBtn.addEventListener('click', nextSlide);
  prevBtn.addEventListener('click', prevSlide);
  
  // 绑定指示点点击事件
  points.forEach((point, index) => {
    point.addEventListener('click', () => {
      currentIndex = index;
      updateSlide();
    });
  });
  
  // 自动播放
  let autoPlayTimer = setInterval(nextSlide, 3000);
  
  // 鼠标悬停时暂停自动播放
  const swipper = document.querySelector('#swipper');
  swipper.addEventListener('mouseenter', () => {
    clearInterval(autoPlayTimer);
  });
  
  // 鼠标离开时恢复自动播放
  swipper.addEventListener('mouseleave', () => {
    autoPlayTimer = setInterval(nextSlide, 3000);
  });
});