带水平滚动条的响应式图像画廊

简介

在本实验中，我们将深入探讨 CSS 编程的世界，创建一个带有水平滚动条的响应式图像画廊。本实验的目的是教你如何使用 CSS 属性来创建一个视觉上吸引人且交互式的画廊，使用户能够无缝浏览图像。在本实验结束时，你将对如何使用 CSS 创建水平可滚动的图像画廊有扎实的理解。

带有水平滚动条的图像画廊

虚拟机中已经提供了 index.html 和 style.css。

以下是创建水平可滚动图像画廊的步骤说明：

要将 .thumbnails 定位在容器底部，为 .thumbnails 类设置 position: absolute; bottom: 8px;。
要在水平滚动时创建捕捉效果，使用 scroll-snap-type: x mandatory 和 overscroll-behavior-x: contain。使用 scroll-snap-align: start 将元素捕捉到容器的起始位置。
通过设置 scrollbar-width: none 隐藏滚动条。要设置伪元素 ::-webkit-scrollbar 的样式，添加 display: none;。
使用 Element.scrollTo() 定义一个 scrollToElement 函数，该函数将画廊滚动到给定的项目。
使用 Array.prototype.map() 和 Array.prototype.join() 填充 .thumbnails 元素。为每个缩略图赋予一个带有图像索引的 data-id 属性。
使用 Document.querySelectorAll() 和 Array.prototype.forEach() 为每个缩略图注册一个 'click' 事件的处理程序。使用 EventTarget.addEventListener() 和 scrollToElement 函数。
使用 Document.querySelector() 和 EventTarget.addEventListener() 为 'scroll' 事件注册一个处理程序。使用 highlightThumbnail 函数更新 .thumbnails 元素以匹配当前滚动位置。

以下是画廊的 HTML 代码：

<div class="gallery-container">
  <div class="thumbnails"></div>
  <div class="slides">
    <div><img src="https://picsum.photos/id/1067/540/720" /></div>
    <div><img src="https://picsum.photos/id/122/540/720" /></div>
    <div><img src="https://picsum.photos/id/188/540/720" /></div>
    <div><img src="https://picsum.photos/id/249/540/720" /></div>
    <div><img src="https://picsum.photos/id/257/540/720" /></div>
    <div><img src="https://picsum.photos/id/259/540/720" /></div>
    <div><img src="https://picsum.photos/id/283/540/720" /></div>
    <div><img src="https://picsum.photos/id/288/540/720" /></div>
    <div><img src="https://picsum.photos/id/299/540/720" /></div>
  </div>
</div>

以下是画廊的 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 代码：

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) => `<div data-id="${i}"></div>`)
  .join("");

thumbnailContainer.querySelectorAll("div").forEach((el) => {
  el.addEventListener("click", () => scrollToElement(el));
});

slideGallery.addEventListener("scroll", (e) => highlightThumbnail());

highlightThumbnail();

请点击右下角的“Go Live”在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已经完成了“带有水平滚动条的图像画廊”实验。你可以在 LabEx 中练习更多实验来提升你的技能。

带水平滚动条的图像画廊

简介

带有水平滚动条的图像画廊

总结