webs/fengxiao/js/aimodel.js

document.addEventListener('DOMContentLoaded', function () {
    const track = document.querySelector('.carousel-track');
    const dotsContainer = document.querySelector('.carousel-dots');

    // 轮播图数据
    const carouselData = [
        {
            title: "客服大模型接入与知识库问答",
            image: "../imgs/model/list1.jpg"
        },
        {
            title: "电商推荐系统/用户画像分析",
            image: "../imgs/model/list2.jpg"
        },
        {
            title: "图像识别(商品识别、OCR、检测)",
            image: "../imgs/model/list3.jpg"
        },
        {
            title: "NLP 应用(舆情分析、智能问答、文档结构化)",
            image: "../imgs/model/list4.jpg"
        },
        {
            title: "多模态生成(AI绘画、广告创意)",
            image: "../imgs/model/list5.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();
    });
});