webs/fengxiao/js/websiteDesign.js

document.addEventListener('DOMContentLoaded', function() {
  const track = document.querySelector('.carousel-track');
  const dotsContainer = document.querySelector('.carousel-dots');
  
  // 轮播图数据
  const carouselData = [
      {
          title: "企业官网 / 品牌官网",
          image: "../imgs/website/roll1.jpg"
      },
      {
          title: "电商商城（B2B/B2C）",
          image: "../imgs/website/roll2.jpg"
      },
      {
          title: "教育、政务、医疗等垂直行业平台",
          image: "../imgs/website/roll3.jpg"
      },
      {
        title: "SaaS 管理后台/数据可视化平台",
        image: "../imgs/website/roll4.jpg"
    }
  ];

  // 创建轮播项目
  function createCarouselItems() {
      // 克隆最后两个项目到开头
      for (let i = carouselData.length - 2; i < carouselData.length; i++) {
          const item = createItem(carouselData[i]);
          track.appendChild(item.cloneNode(true));
      }
      
      // 添加原始项目
      carouselData.forEach(data => {
          track.appendChild(createItem(data));
      });
      
      // 克隆前两个项目到末尾
      for (let i = 0; i < 2; i++) {
          const item = createItem(carouselData[i]);
          track.appendChild(item.cloneNode(true));
      }
  }

  function createItem(data) {
      const item = document.createElement('div');
      item.className = 'carousel-item';
      item.innerHTML = `
          <img src="${data.image}" alt="${data.title}">
          <div class="carousel-caption">${data.title}</div>
      `;
      return item;
  }

  // 初始化圆点
  function initDots() {
      dotsContainer.innerHTML = '';
      carouselData.forEach((_, index) => {
          const dot = document.createElement('div');
          dot.className = 'dot' + (index === 0 ? ' active' : '');
          dot.addEventListener('click', () => goToSlide(index));
          dotsContainer.appendChild(dot);
      });
  }

  createCarouselItems();
  initDots();

  const items = document.querySelectorAll('.carousel-item');
  const dots = document.querySelectorAll('.dot');
  const itemCount = carouselData.length;
  let currentIndex = 2; // 从第一个真实项目开始
  let isAnimating = false;
  let autoScrollInterval;



  function updateCarousel() {
      const itemWidth = items[0].offsetWidth + 40; // 包括margin
      
      // 更新位置
      track.style.transform = `translateX(${-(currentIndex * itemWidth)}px)`;
      
      // 更新项目状态
      items.forEach((item, index) => {
        item.classList.remove('left-side', 'center', 'right-side');
        
        const relativePos = index - currentIndex;
        if (relativePos === -1) {
            item.classList.add('left-side');
        } else if (relativePos === 0) {
            item.classList.add('center');
        } else if (relativePos === 1) {
            item.classList.add('right-side');
        }
    });
      
      // 更新圆点
      const realIndex = (currentIndex - 2 + itemCount) % itemCount;
      dots.forEach((dot, index) => {
          dot.classList.toggle('active', index === realIndex);
      });
  }

  function goToSlide(index) {
      if (isAnimating) return;
      isAnimating = true;
      
      currentIndex = index + 2; // 调整索引以匹配克隆项目
      
      track.style.transition = 'transform 0.8s cubic-bezier(0.16, 0.77, 0.58, 0.97)';
      updateCarousel();
      
      setTimeout(() => {
          isAnimating = false;
      }, 800);
      
      resetAutoScroll();
  }

  function nextSlide() {
      if (isAnimating) return;
      isAnimating = true;
      
      currentIndex++;
      track.style.transition = 'transform 0.8s cubic-bezier(0.16, 0.77, 0.58, 0.97)';
      updateCarousel();
      
      // 检查是否到达末尾克隆项目
      if (currentIndex > itemCount + 1) {
          setTimeout(() => {
              track.style.transition = 'none';
              currentIndex = 2;
              updateCarousel();
              isAnimating = false;
          }, 800);
      } else {
          setTimeout(() => {
              isAnimating = false;
          }, 800);
      }
  }

  function startAutoScroll() {
      autoScrollInterval = setInterval(nextSlide, 3000);
  }

  function resetAutoScroll() {
      clearInterval(autoScrollInterval);
      startAutoScroll();
  }

  // 初始化
  updateCarousel();
  startAutoScroll();

  // 窗口大小变化时重新计算
  window.addEventListener('resize', () => {
      track.style.transition = 'none';
      updateCarousel();
  });
});