162 lines
4.5 KiB
JavaScript
162 lines
4.5 KiB
JavaScript
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();
|
||
});
|
||
}); |