`).join('')}
${data.map((d, i) => i % 2 === 0 ? `${i + 1}` : '').join('')}
+3
-3
+2
-2
`;
}
// ===================== 渲染与切换 =====================
let current = 0;
const navList = document.getElementById("navList");
const slideContainer = document.getElementById("slideContainer");
const progressDots = document.getElementById("progressDots");
const crumbName = document.getElementById("crumbName");
const prevBtn = document.getElementById("prevBtn");
const nextBtn = document.getElementById("nextBtn");
const navPrev = document.getElementById("navPrev");
const navNext = document.getElementById("navNext");
function scrollNavToCurrent() {
const el = navList.children[current];
if (el && el.scrollIntoView) el.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
}
function updateNavArrows() {
navPrev.disabled = navList.scrollLeft <= 2;
navNext.disabled = navList.scrollLeft + navList.clientWidth >= navList.scrollWidth - 2;
}
navPrev.addEventListener("click", () => { navList.scrollBy({ left: -160, behavior: "smooth" }); });
navNext.addEventListener("click", () => { navList.scrollBy({ left: 160, behavior: "smooth" }); });
navList.addEventListener("scroll", updateNavArrows);
window.addEventListener("resize", updateNavArrows);
modules.forEach((m, i) => {
const li = document.createElement("li");
li.className = "nav-item" + (i === 0 ? " active" : "");
li.innerHTML = `
${m.title}${m.short}
`;
li.onclick = () => goTo(i);
navList.appendChild(li);
});
modules.forEach((_, i) => {
const pd = document.createElement("div");
pd.className = "pd" + (i === 0 ? " active" : "");
progressDots.appendChild(pd);
});
function renderSlide() {
const m = modules[current];
crumbName.textContent = m.title;
slideContainer.innerHTML = `
`;
}
function updateUI() {
document.querySelectorAll(".nav-item").forEach((el, i) => el.classList.toggle("active", i === current));
document.querySelectorAll(".pd").forEach((el, i) => el.classList.toggle("active", i === current));
prevBtn.disabled = current === 0;
nextBtn.disabled = current === modules.length - 1;
renderSlide();
document.querySelector(".content").scrollTop = 0;
}
function goTo(i) { current = i; updateUI(); scrollNavToCurrent(); }
function goPrev() { if (current > 0) goTo(current - 1); }
function goNext() { if (current < modules.length - 1) goTo(current + 1); }
document.addEventListener("keydown", (e) => {
if (e.key === "ArrowLeft") goPrev();
if (e.key === "ArrowRight") goNext();
});
updateUI();
scrollNavToCurrent();
updateNavArrows();