gallery-container">

``` 以下是画廊的 CSS 代码： ```css .gallery-container { position: relative; display: flex; justify-content: center; } .thumbnails { position: absolute; bottom: 8px; display: flex; flex-direction: row; gap: 6px; } .thumbnails div { width: 8px; height: 8px; cursor: pointer; background: #aaa; border-radius: 100%; } .thumbnails div.highlighted { background-color: #777; } .slides { margin: 0 16px; display: grid; grid-auto-flow: column; gap: 1rem; width: 540px; padding: 0 0.25rem; height: 720px; overflow-y: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; } .slides > div { scroll-snap-align: start; } .slides img { width: 540px; object-fit: contain; } .slides::-webkit-scrollbar { display: none; } ``` 以下是画廊的 JavaScript 代码： ```js const slideGallery = document.querySelector(".slides"); const slides = slideGallery.querySelectorAll("div"); const thumbnailContainer = document.querySelector(".thumbnails"); const slideCount = slides.length; const slideWidth = 540; const highlightThumbnail = () => { thumbnailContainer .querySelectorAll("div.highlighted") .forEach((el) => el.classList.remove("highlighted")); const index = Math.floor(slideGallery.scrollLeft / slideWidth); thumbnailContainer .querySelector(`div[data-id="${index}"]`) .classList.add("highlighted"); }; const scrollToElement = (el) => { const index = parseInt(el.dataset.id, 10); slideGallery.scrollTo(index * slideWidth, 0); }; thumbnailContainer.innerHTML += [...slides] .map((slide, i) => `

`) .join(""); thumbnailContainer.querySelectorAll("div").forEach((el) => { el.addEventListener("click", () => scrollToElement(el)); }); slideGallery.addEventListener("scroll", (e) => highlightThumbnail()); highlightThumbnail(); ``` 请点击右下角的“Go Live”在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。