// 导航栏滚动效果 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 = `

${project.category}

${project.title}

${project.description.substring(0, 100)}...

查看详情

`; 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 = `

${testimonial.content}

${testimonial.authorName}

${testimonial.authorTitle}

`; 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 = '

没有找到相关项目

'; return; } projects.forEach(project => { const projectCard = document.createElement('div'); projectCard.className = 'project-card'; projectCard.innerHTML = `

${project.category}

${project.title}

${project.description.substring(0, 100)}...

查看详情

`; 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 = '

无效的项目ID

'; return; } // 查找项目 const project = window.projectsData.find(p => p.id === projectId); if (!project) { projectDetail.innerHTML = '

未找到该项目

'; return; } // 渲染项目详情 projectDetail.innerHTML = `

${project.category}

${project.title}

${project.date} ${project.client}

${project.gallery ? project.gallery.map(img => ` ${project.title}

`).join('') : ''}

项目描述

${project.description}

项目目标

${obj}

项目成果

${project.results}

AI评论

${project.aiComment}

用户评论 (${project.comments.length})

${project.comments.length > 0 ? project.comments.map(comment => `

${comment.authorName}

${comment.date}

${comment.content}

`).join('') : '

暂无评论

' }

添加评论

`; // 评论表单处理 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(); } });

作品「品牌营销双轨策略：顶天立地 + 铺天盖地」预览