// 导航栏滚动效果
window.addEventListener('scroll', function() {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
// 移动导航菜单
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
hamburger.addEventListener('click', function() {
navLinks.classList.toggle('active');
});
// 轮播图功能
const carouselItems = document.querySelectorAll('.carousel-item');
const carouselIndicators = document.querySelectorAll('.carousel-indicators span');
const prevBtn = document.querySelector('.carousel-control.prev');
const nextBtn = document.querySelector('.carousel-control.next');
let currentSlide = 0;
let slideInterval;
function showSlide(index) {
// 隐藏所有幻灯片
carouselItems.forEach(item => {
item.classList.remove('active');
});
// 重置所有指示器
carouselIndicators.forEach(indicator => {
indicator.classList.remove('active');
});
// 显示当前幻灯片
carouselItems[index].classList.add('active');
carouselIndicators[index].classList.add('active');
}
function nextSlide() {
currentSlide = (currentSlide + 1) % carouselItems.length;
showSlide(currentSlide);
}
function prevSlide() {
currentSlide = (currentSlide - 1 + carouselItems.length) % carouselItems.length;
showSlide(currentSlide);
}
// 启动自动轮播
function startSlideInterval() {
slideInterval = setInterval(nextSlide, 5000);
}
// 停止自动轮播
function stopSlideInterval() {
clearInterval(slideInterval);
}
// 事件监听
prevBtn.addEventListener('click', function() {
stopSlideInterval();
prevSlide();
startSlideInterval();
});
nextBtn.addEventListener('click', function() {
stopSlideInterval();
nextSlide();
startSlideInterval();
});
carouselIndicators.forEach((indicator, index) => {
indicator.addEventListener('click', function() {
stopSlideInterval();
currentSlide = index;
showSlide(currentSlide);
startSlideInterval();
});
});
// 鼠标悬停时停止轮播
const carousel = document.querySelector('.carousel');
carousel.addEventListener('mouseenter', stopSlideInterval);
carousel.addEventListener('mouseleave', startSlideInterval);
// 初始化轮播
showSlide(currentSlide);
startSlideInterval();
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}
});
});
// 表单提交处理
const contactForm = document.getElementById('contactForm');
if (contactForm) {
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const phone = document.getElementById('phone').value;
const message = document.getElementById('message').value;
// 简单验证
if (!name || !email || !message) {
alert('请填写必填字段!');
return;
}
// 模拟表单提交
alert('感谢您的留言,我们会尽快回复您!');
contactForm.reset();
});
}
// 动态加载项目
function loadProjects() {
const projectGrid = document.querySelector('.project-grid');
if (!projectGrid || !window.projectsData) return;
projectGrid.innerHTML = '';
// 只显示前6个项目作为精选
const featuredProjects = window.projectsData.slice(0, 6);
featuredProjects.forEach(project => {
const projectCard = document.createElement('div');
projectCard.className = 'project-card';
projectCard.innerHTML = `
<div class="project-image">
<img src="${project.image}" alt="${project.title}">
</div>
<div class="project-info">
<span class="project-category">${project.category}</span>
<h3>${project.title}</h3>
<p>${project.description.substring(0, 100)}...</p>
<a href="project-detail.html?id=${project.id}" class="btn-secondary">查看详情</a>
</div>
`;
projectGrid.appendChild(projectCard);
});
}
// 动态加载用户评价
function loadTestimonials() {
const testimonialSlider = document.querySelector('.testimonial-slider');
if (!testimonialSlider || !window.testimonialsData) return;
testimonialSlider.innerHTML = '';
window.testimonialsData.forEach((testimonial, index) => {
const testimonialItem = document.createElement('div');
testimonialItem.className = 'testimonial-item';
if (index === 0) {
testimonialItem.classList.add('active');
}
testimonialItem.innerHTML = `
<div class="testimonial-content">
<p>${testimonial.content}</p>
<div class="testimonial-author">
<div class="author-image">
<img src="${testimonial.authorImage}" alt="${testimonial.authorName}">
</div>
<div class="author-info">
<h4>${testimonial.authorName}</h4>
<p>${testimonial.authorTitle}</p>
</div>
</div>
</div>
`;
testimonialSlider.appendChild(testimonialItem);
});
// 简单的评价轮播
let currentTestimonial = 0;
const testimonialItems = document.querySelectorAll('.testimonial-item');
function showTestimonial(index) {
testimonialItems.forEach(item => {
item.style.transform = `translateX(-${index * 100}%)`;
});
}
function nextTestimonial() {
currentTestimonial = (currentTestimonial + 1) % testimonialItems.length;
showTestimonial(currentTestimonial);
}
// 自动轮播评价
setInterval(nextTestimonial, 5000);
}
// 页面加载完成后初始化
window.addEventListener('load', function() {
loadProjects();
loadTestimonials();
});
// 发布需求表单处理
const publishForm = document.getElementById('publishForm');
if (publishForm) {
publishForm.addEventListener('submit', function(e) {
e.preventDefault();
const title = document.getElementById('projectTitle').value;
const category = document.getElementById('projectCategory').value;
const description = document.getElementById('projectDescription').value;
const budget = document.getElementById('projectBudget').value;
const deadline = document.getElementById('projectDeadline').value;
const contact = document.getElementById('contactInfo').value;
// 简单验证
if (!title || !category || !description || !contact) {
alert('请填写必填字段!');
return;
}
// 生成AI评论(模拟)
const aiComments = [
"这个项目很有创意,我们很期待看到它的实施!",
"想法不错,但建议进一步明确目标受众。",
"这是一个很有挑战性的项目,但我们有信心完成它!",
"创意很好,预算也很合理,值得尝试。",
"项目描述很详细,我们可以提供专业的支持。"
];
const randomComment = aiComments[Math.floor(Math.random() * aiComments.length)];
alert(`项目发布成功!\nAI评论:${randomComment}`);
publishForm.reset();
});
}
// 项目列表页筛选功能
function setupProjectFilters() {
const categoryFilter = document.getElementById('categoryFilter');
const projectList = document.querySelector('.project-list');
if (!categoryFilter || !projectList || !window.projectsData) return;
// 初始加载所有项目
renderProjects(window.projectsData);
// 筛选事件监听
categoryFilter.addEventListener('change', function() {
const selectedCategory = this.value;
let filteredProjects;
if (selectedCategory === 'all') {
filteredProjects = window.projectsData;
} else {
filteredProjects = window.projectsData.filter(project => project.category === selectedCategory);
}
renderProjects(filteredProjects);
});
function renderProjects(projects) {
projectList.innerHTML = '';
if (projects.length === 0) {
projectList.innerHTML = '<p class="no-results">没有找到相关项目</p>';
return;
}
projects.forEach(project => {
const projectCard = document.createElement('div');
projectCard.className = 'project-card';
projectCard.innerHTML = `
<div class="project-image">
<img src="${project.image}" alt="${project.title}">
</div>
<div class="project-info">
<span class="project-category">${project.category}</span>
<h3>${project.title}</h3>
<p>${project.description.substring(0, 100)}...</p>
<a href="project-detail.html?id=${project.id}" class="btn-secondary">查看详情</a>
</div>
`;
projectList.appendChild(projectCard);
});
}
}
// 项目详情页加载
function loadProjectDetail() {
const projectDetail = document.querySelector('.project-detail');
if (!projectDetail || !window.projectsData) return;
// 获取URL中的项目ID
const urlParams = new URLSearchParams(window.location.search);
const projectId = urlParams.get('id');
if (!projectId) {
projectDetail.innerHTML = '<p class="error">无效的项目ID</p>';
return;
}
// 查找项目
const project = window.projectsData.find(p => p.id === projectId);
if (!project) {
projectDetail.innerHTML = '<p class="error">未找到该项目</p>';
return;
}
// 渲染项目详情
projectDetail.innerHTML = `
<div class="project-header">
<span class="project-category">${project.category}</span>
<h1>${project.title}</h1>
<div class="project-meta">
<span><i class="fa fa-calendar"></i> ${project.date}</span>
<span><i class="fa fa-user"></i> ${project.client}</span>
</div>
</div>
<div class="project-gallery">
<img src="${project.image}" alt="${project.title}">
${project.gallery ? project.gallery.map(img => `<img src="${img}" alt="${project.title}">`).join('') : ''}
</div>
<div class="project-description">
<h2>项目描述</h2>
<p>${project.description}</p>
</div>
<div class="project-objectives">
<h2>项目目标</h2>
<ul>
${project.objectives.map(obj => `<li>${obj}</li>`).join('')}
</ul>
</div>
<div class="project-results">
<h2>项目成果</h2>
<p>${project.results}</p>
</div>
<div class="ai-comment">
<h2>AI评论</h2>
<div class="comment-content">
<i class="fa fa-robot"></i>
<p>${project.aiComment}</p>
</div>
</div>
<div class="project-comments">
<h2>用户评论 (${project.comments.length})</h2>
${project.comments.length > 0 ?
project.comments.map(comment => `
<div class="comment-item">
<div class="comment-author">
<img src="${comment.authorImage}" alt="${comment.authorName}">
<div class="author-info">
<h4>${comment.authorName}</h4>
<p>${comment.date}</p>
</div>
</div>
<div class="comment-content">
<p>${comment.content}</p>
</div>
</div>
`).join('') :
'<p class="no-comments">暂无评论</p>'
}
</div>
<div class="add-comment">
<h2>添加评论</h2>
<form id="commentForm">
<div class="form-group">
<label for="commentName">姓名</label>
<input type="text" id="commentName" name="commentName" required>
</div>
<div class="form-group">
<label for="commentEmail">邮箱</label>
<input type="email" id="commentEmail" name="commentEmail" required>
</div>
<div class="form-group">
<label for="commentContent">评论内容</label>
<textarea id="commentContent" name="commentContent" rows="4" required></textarea>
</div>
<button type="submit" class="btn-primary">提交评论</button>
</form>
</div>
`;
// 评论表单处理
const commentForm = document.getElementById('commentForm');
if (commentForm) {
commentForm.addEventListener('submit', function(e) {
e.preventDefault();
const name = document.getElementById('commentName').value;
const email = document.getElementById('commentEmail').value;
const content = document.getElementById('commentContent').value;
// 简单验证
if (!name || !email || !content) {
alert('请填写必填字段!');
return;
}
alert('评论提交成功,等待审核!');
commentForm.reset();
});
}
}
// 页面加载完成后初始化特定页面功能
window.addEventListener('load', function() {
// 检查当前页面是否为项目列表页
if (document.getElementById('categoryFilter')) {
setupProjectFilters();
}
// 检查当前页面是否为项目详情页
if (document.querySelector('.project-detail')) {
loadProjectDetail();
}
});
index.html
index.html