388 lines
13 KiB
JavaScript
388 lines
13 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
||
const elements = document.querySelectorAll('.perCent2');
|
||
|
||
const animatePercentage = (element) => {
|
||
// 添加可见类，触发CSS过渡效果
|
||
element.classList.add('visible');
|
||
|
||
let current = 1;
|
||
const target = parseInt(element.getAttribute('data-target'));
|
||
|
||
// 重置为初始值
|
||
element.textContent = '1%';
|
||
|
||
const timer = setInterval(() => {
|
||
current += 1;
|
||
element.textContent = `${current}%`;
|
||
|
||
if (current >= target) {
|
||
clearInterval(timer);
|
||
}
|
||
}, 30);
|
||
};
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
animatePercentage(entry.target);
|
||
} else {
|
||
// 当元素离开视口时
|
||
entry.target.classList.remove('visible');
|
||
entry.target.textContent = '1%'; // 重置为初始值
|
||
}
|
||
});
|
||
}, {
|
||
threshold: 0.5,
|
||
rootMargin: '0px'
|
||
});
|
||
|
||
elements.forEach(element => {
|
||
// 初始状态设置
|
||
element.classList.remove('visible');
|
||
element.textContent = '1%';
|
||
observer.observe(element);
|
||
});
|
||
|
||
// ------------------------------
|
||
// 获取所需的DOM元素
|
||
const container = document.querySelector('.carousel-container');
|
||
const list = document.querySelector('.carousel-list');
|
||
const items = document.querySelectorAll('.carousel-item');
|
||
const prevBtn = document.querySelector('.carousel-arrow-left');
|
||
const nextBtn = document.querySelector('.carousel-arrow-right');
|
||
const indicators = document.querySelectorAll('.indicator');
|
||
|
||
// 如果元素不存在，直接返回
|
||
if (!container || !list || !items.length) {
|
||
console.error('轮播图元素不存在，初始化失败');
|
||
return;
|
||
}
|
||
|
||
// 克隆第一个和最后一个项目
|
||
const firstClone = items[0].cloneNode(true);
|
||
const lastClone = items[items.length - 1].cloneNode(true);
|
||
|
||
// 将克隆的元素添加到列表中
|
||
list.appendChild(firstClone);
|
||
list.insertBefore(lastClone, list.firstChild);
|
||
|
||
// 设置初始位置，因为添加了一个项目在前面，所以从1开始
|
||
let currentIndex = 1;
|
||
let interval = null;
|
||
let isTransitioning = false;
|
||
|
||
// 初始化位置
|
||
updatePosition(false);
|
||
|
||
// 更新位置的函数
|
||
function updatePosition(withTransition = true) {
|
||
// 如果需要过渡动画
|
||
if (withTransition) {
|
||
list.style.transition = 'transform 0.5s ease';
|
||
} else {
|
||
list.style.transition = 'none';
|
||
}
|
||
|
||
// 计算位置并应用变换
|
||
const position = -currentIndex * 100;
|
||
list.style.transform = `translateX(${position}%)`;
|
||
|
||
// 更新指示器状态，注意要减去1因为我们添加了克隆项目
|
||
updateIndicators();
|
||
}
|
||
|
||
// 更新指示器状态
|
||
function updateIndicators() {
|
||
// 考虑循环，将currentIndex转换回真实索引
|
||
const realIndex = currentIndex - 1;
|
||
// 使用模运算确保索引在有效范围内
|
||
const activeIndex = (realIndex + items.length) % items.length;
|
||
|
||
indicators.forEach((indicator, i) => {
|
||
indicator.classList.toggle('active', i === activeIndex);
|
||
});
|
||
}
|
||
|
||
// 自动播放函数
|
||
function startAutoPlay() {
|
||
if (interval) clearInterval(interval);
|
||
interval = setInterval(nextSlide, 3000);
|
||
}
|
||
|
||
// 暂停自动播放
|
||
function stopAutoPlay() {
|
||
clearInterval(interval);
|
||
}
|
||
|
||
// 下一张函数
|
||
function nextSlide() {
|
||
if (isTransitioning) return;
|
||
isTransitioning = true;
|
||
|
||
currentIndex++;
|
||
updatePosition();
|
||
}
|
||
|
||
// 上一张函数
|
||
function prevSlide() {
|
||
if (isTransitioning) return;
|
||
isTransitioning = true;
|
||
|
||
currentIndex--;
|
||
updatePosition();
|
||
}
|
||
|
||
// 处理过渡结束事件
|
||
list.addEventListener('transitionend', () => {
|
||
isTransitioning = false;
|
||
|
||
// 如果到达了最后一个克隆项
|
||
if (currentIndex >= items.length + 1) {
|
||
currentIndex = 1;
|
||
updatePosition(false);
|
||
}
|
||
|
||
// 如果到达了第一个克隆项
|
||
if (currentIndex <= 0) {
|
||
currentIndex = items.length;
|
||
updatePosition(false);
|
||
}
|
||
});
|
||
|
||
// // 绑定按钮事件
|
||
// prevBtn.addEventListener('click', () => {
|
||
// prevSlide();
|
||
// stopAutoPlay();
|
||
// startAutoPlay();
|
||
// });
|
||
|
||
// nextBtn.addEventListener('click', () => {
|
||
// nextSlide();
|
||
// stopAutoPlay();
|
||
// startAutoPlay();
|
||
// });
|
||
|
||
// 绑定指示器点击事件
|
||
indicators.forEach((indicator, index) => {
|
||
indicator.addEventListener('click', () => {
|
||
currentIndex = index + 1; // +1因为我们添加了克隆项目
|
||
updatePosition();
|
||
stopAutoPlay();
|
||
startAutoPlay();
|
||
});
|
||
});
|
||
|
||
// 鼠标悬停暂停
|
||
container.addEventListener('mouseenter', stopAutoPlay);
|
||
container.addEventListener('mouseleave', startAutoPlay);
|
||
|
||
// 添加触摸滑动支持
|
||
let touchStartX = 0;
|
||
let touchEndX = 0;
|
||
|
||
container.addEventListener('touchstart', (e) => {
|
||
touchStartX = e.touches[0].clientX;
|
||
stopAutoPlay();
|
||
});
|
||
|
||
container.addEventListener('touchend', (e) => {
|
||
touchEndX = e.changedTouches[0].clientX;
|
||
const difference = touchStartX - touchEndX;
|
||
|
||
if (Math.abs(difference) > 50) {
|
||
if (difference > 0) {
|
||
nextSlide();
|
||
} else {
|
||
prevSlide();
|
||
}
|
||
}
|
||
|
||
startAutoPlay();
|
||
});
|
||
|
||
// 开始自动播放
|
||
startAutoPlay();
|
||
|
||
// --------------------------------
|
||
|
||
const langData = {
|
||
zh: {
|
||
nav: {
|
||
home: "首页",
|
||
business: "主营业务",
|
||
products: "产品案例",
|
||
support: "技术支持",
|
||
future: "展望未来",
|
||
about: "关于我们"
|
||
},
|
||
btn: "English",
|
||
logo: "./imgs/svg/logo.svg",
|
||
bannerBg: "../imgs/svg/背景纹（大）.svg",
|
||
bannerListImgs: [
|
||
"../imgs/home/mainBusiness.png",
|
||
"../imgs/home/aboutUs.png",
|
||
|
||
],
|
||
CarouselImgs: [
|
||
"./imgs/home/Y100.jpg",
|
||
"./imgs/home/S6PRO.jpg",
|
||
],
|
||
carouselText: "产品详情",
|
||
title: "深圳汉晶电子信息有限公司",
|
||
bannerBottom2Title: "为什么选择汉晶?",
|
||
bannerBottomListOneTitle: "IC设计全生命周期一站式覆盖",
|
||
bannerBottomListTwoTitle: "独特的低功耗设计，让芯片更有竞争力",
|
||
bannerBottomListThreeTitle: "有稳定的芯片制造商合作关系",
|
||
bannerBottomListFourTitle: "流片均一版成功，即流片成功率100%,助力客户赢得市场",
|
||
bannertopTitle: "芯片设计技术服务",
|
||
bannertopText: "我们公司提供全方位的芯片设计技术服务，涵盖从需求讨论、系统设计、逻辑设计、FPGA原型验证到最终的芯片制造、测试与验证等各个环节。我们采用行业领先的工具和技术，确保芯片的性能、功耗、稳定性都能满足客户需求。",
|
||
bannerletfTextTitle: "Y100 服务器芯片",
|
||
bannerletfTextTitle2: "S6PRO 运算加速芯片",
|
||
bannerBottomTextTitle: "我们的目标",
|
||
bannerBottomTextText: "汇聚人才，共同创造突破性技术，为更加智能、更加安全、更有保障的科技世界保驾护航。",
|
||
newBottomTitle: "研发团队",
|
||
newBottomText: "研究生学历",
|
||
emailLeftTitle: "我们准备好了",
|
||
emailLeftText: "如果您有更多的需求，请联系我们",
|
||
|
||
},
|
||
en: {
|
||
nav: {
|
||
home: "Home",
|
||
business: "Business",
|
||
products: "Products",
|
||
support: "Support",
|
||
future: "Future",
|
||
about: "About Us"
|
||
},
|
||
btn: "简体中文",
|
||
logo: "./imgs/svg/logo_en.svg",
|
||
bannerBg: "../imgs/svg/bg_en.svg",
|
||
bannerListImgs: [
|
||
"../imgs/home/mainBusiness_en.png",
|
||
"../imgs/home/aboutUs_en.png",
|
||
|
||
],
|
||
CarouselImgs: [
|
||
"./imgs/home/Y100_en.jpg",
|
||
"./imgs/home/S6PRO_en.jpg",
|
||
],
|
||
carouselText: "Product Details",
|
||
title: "SZHJ Electronic Information Co., Ltd",
|
||
bannerBottom2Title: "Why Hanjing?",
|
||
bannerBottomListOneTitle: "One-stop coverage of the entire IC design life cycle",
|
||
bannerBottomListTwoTitle: "Unique low-power design makes the chip more competitive",
|
||
bannerBottomListThreeTitle: "Stable relationships with chip makers",
|
||
bannerBottomListFourTitle: "Successful flow of the first version of the film, i.e., 100% success rate of the flow of the film, to help customers win the market",
|
||
bannertopTitle: "Chip Design Technology Services",
|
||
bannertopText: "Our company provides a full range of chip design technology services, covering all aspects from requirements discussion, system design, logic design, FPGA prototyping, to final chip manufacturing, testing and verification. We use industry-leading tools and technologies to ensure that the performance, power consumption, and stability of the chip meets customer requirements.",
|
||
bannerletfTextTitle: "Y100 Server Chips",
|
||
bannerletfTextTitle2: "S6PRO computing accelerator chip",
|
||
bannerBottomTextTitle: "Our Goals",
|
||
bannerBottomTextText: "Bringing together talents to create breakthrough technologies for a smarter, safer and more secure technological world.",
|
||
newBottomTitle: "R&D Team",
|
||
newBottomText: "postgraduate education",
|
||
emailLeftTitle: "We're ready.",
|
||
emailLeftText: "If you have more needs, please contact us!",
|
||
|
||
}
|
||
};
|
||
|
||
|
||
|
||
let currentLang = localStorage.getItem('siteLang') || "zh";
|
||
|
||
function applyLang(lang) {
|
||
const data = langData[lang];
|
||
|
||
// 导航文本
|
||
document.getElementById("nav-home").textContent = data.nav.home;
|
||
document.getElementById("nav-business").textContent = data.nav.business;
|
||
document.getElementById("nav-products").textContent = data.nav.products;
|
||
document.getElementById("nav-support").textContent = data.nav.support;
|
||
document.getElementById("nav-future").textContent = data.nav.future;
|
||
document.getElementById("nav-about").textContent = data.nav.about;
|
||
|
||
// 按钮文本
|
||
document.getElementById("lang-toggle").textContent = data.btn;
|
||
// logo
|
||
document.getElementById("logo-img").src = data.logo;
|
||
document.getElementById("footerLogo").src = data.logo;
|
||
|
||
// 轮播图图片全部替换（包括克隆节点）
|
||
document.querySelectorAll('img[alt="S6PRO"]').forEach(img => {
|
||
img.src = data.CarouselImgs[1];
|
||
});
|
||
document.querySelectorAll('img[alt="Y100"]').forEach(img => {
|
||
img.src = data.CarouselImgs[0];
|
||
});
|
||
|
||
// 轮播图详情按钮文本全部切换
|
||
document.querySelectorAll('.carouselText').forEach(span => {
|
||
span.textContent = data.carouselText;
|
||
});
|
||
|
||
// 其它页面内容
|
||
document.querySelector('.bannerBottom2Title').textContent = data.bannerBottom2Title;
|
||
document.querySelector('.bannerBottomListOneTitle').textContent = data.bannerBottomListOneTitle;
|
||
document.querySelector('.bannerBottomListTwoTitle').textContent = data.bannerBottomListTwoTitle;
|
||
document.querySelector('.bannerBottomListThreeTitle').textContent = data.bannerBottomListThreeTitle;
|
||
document.querySelector('.bannerBottomListFourTitle').textContent = data.bannerBottomListFourTitle;
|
||
document.querySelector('.bannertopTitle').textContent = data.bannertopTitle;
|
||
document.querySelector('.bannertopText').textContent = data.bannertopText;
|
||
document.querySelector('.bannerletfTextTitle').textContent = data.bannerletfTextTitle;
|
||
document.querySelector('.bannerBottomTextTitle').textContent = data.bannerBottomTextTitle;
|
||
document.querySelector('.bannerBottomTextText').textContent = data.bannerBottomTextText;
|
||
document.querySelector('.newBottomTitle').textContent = data.newBottomTitle;
|
||
document.querySelector('.newBottomText').textContent = data.newBottomText;
|
||
document.querySelector('.emailLeftTitle').textContent = data.emailLeftTitle;
|
||
document.querySelector('.emailLeftText').textContent = data.emailLeftText;
|
||
document.querySelector('.footerBoxRightTitle').textContent = data.title;
|
||
document.querySelector('.title').textContent = data.title;
|
||
document.getElementById("bannerletfTextTitle2").textContent = data.bannerletfTextTitle2;
|
||
|
||
|
||
if (lang === 'en') {
|
||
document.querySelector('.textBox').classList.add('en');
|
||
|
||
|
||
} else {
|
||
document.querySelector('.textBox').classList.remove('en');
|
||
}
|
||
|
||
|
||
|
||
// bannerBottomList 背景图片
|
||
const bannerListClasses = [
|
||
".bannertop",
|
||
".bannerBottom",
|
||
];
|
||
bannerListClasses.forEach((cls, idx) => {
|
||
const el = document.querySelector(cls);
|
||
if (el) {
|
||
el.style.backgroundImage = `url(${data.bannerListImgs[idx]})`;
|
||
}
|
||
});
|
||
}
|
||
|
||
function handleLangToggle() {
|
||
currentLang = currentLang === "zh" ? "en" : "zh";
|
||
localStorage.setItem('siteLang', currentLang);
|
||
applyLang(currentLang);
|
||
}
|
||
// 初始化
|
||
applyLang(currentLang);
|
||
|
||
|
||
// 事件绑定
|
||
document.getElementById("lang-toggle").addEventListener("click", handleLangToggle);
|
||
document.getElementById("lang-toggle").addEventListener("keydown", e => {
|
||
if (e.key === "Enter" || e.key === " ") handleLangToggle();
|
||
});
|
||
|
||
|
||
});
|
||
|
||
|
||
|