丰潇网站完成
This commit is contained in:
167
fengxiao/js/aimodel.js
Normal file
167
fengxiao/js/aimodel.js
Normal file
@@ -0,0 +1,167 @@
|
||||
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();
|
||||
});
|
||||
});
|
||||
162
fengxiao/js/websiteDesign.js
Normal file
162
fengxiao/js/websiteDesign.js
Normal file
@@ -0,0 +1,162 @@
|
||||
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();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user