定制化单图HTML图片画廊开发适配问题咨询

一、图片高度自动填充实现 #

要让图片填满顶部线条到底部线条上方的区域，用 CSS Grid 划分页面区域结合 object-fit 属性就能解决：

1. 页面布局结构
   给页面容器设置 Grid 布局，明确分配顶部线条、图片区、底部文本+线条的空间：

   .gallery-page-container {
     display: grid;
     grid-template-rows: auto 1fr auto; /* 顶部线条自适应高度，图片区占剩余视口高度，底部区域自适应 */
     min-height: 100vh;
     margin: 0;
     padding: 0;
   }
   .top-line {
     height: 1px; /* 可根据实际设计调整线条高度 */
     background-color: #000;
   }
   .image-gallery-container {
     position: relative;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   .gallery-image {
     width: 100%;
     height: 100%;
     object-fit: cover; /* 保证图片填充容器同时维持比例 */
   }
   .bottom-section {
     position: relative;
     padding: 20px 0;
   }
   .bottom-line {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 1px;
     background-color: #000;
   }
   

2. 底部文本定位
   用绝对定位+Flex 布局实现三个文本的垂直排列：

   .bottom-text-group {
     position: absolute;
     left: 20px;
     bottom: 0;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     height: 100%;
   }
   .description-text {
     width: 25vw;
     white-space: nowrap;
     font-size: 20px;
   }
   .sirname-text, .organization-text {
     font-size: 20px;
     margin-bottom: 10px;
   }
   .organization-text {
     margin-bottom: 20px; /* 与底部线条保持间距 */
   }
   

二、桌面端导航交互实现 #

不用透明按钮，直接监听图片容器的鼠标位置即可实现光标切换和点击导航：

1. 光标样式控制

   .image-gallery-container {
     cursor: default;
   }
   .image-gallery-container.left-hover {
     cursor: w-resize; /* 左箭头光标 */
   }
   .image-gallery-container.right-hover {
     cursor: e-resize; /* 右箭头光标 */
   }
   

2. JS 事件逻辑

   const galleryContainer = document.querySelector('.image-gallery-container');
   const images = document.querySelectorAll('.gallery-image');
   const descriptions = document.querySelectorAll('.description-text');
   const sirnames = document.querySelectorAll('.sirname-text');
   const organizations = document.querySelectorAll('.organization-text');
   let currentIndex = 0;
   
   // 切换显示当前索引的内容
   function showCurrentItem() {
     // 隐藏所有内容
     images.forEach(img => img.style.display = 'none');
     descriptions.forEach(t => t.style.display = 'none');
     sirnames.forEach(t => t.style.display = 'none');
     organizations.forEach(t => t.style.display = 'none');
     // 显示当前项
     images[currentIndex].style.display = 'block';
     descriptions[currentIndex].style.display = 'block';
     sirnames[currentIndex].style.display = 'block';
     organizations[currentIndex].style.display = 'block';
   }
   
   // 初始化显示第一项
   showCurrentItem();
   
   // 鼠标移动判断左右区域，切换光标
   galleryContainer.addEventListener('mousemove', (e) => {
     const containerWidth = galleryContainer.offsetWidth;
     const mouseX = e.clientX - galleryContainer.getBoundingClientRect().left;
     if (mouseX < containerWidth / 2) {
       galleryContainer.classList.add('left-hover');
       galleryContainer.classList.remove('right-hover');
     } else {
       galleryContainer.classList.add('right-hover');
       galleryContainer.classList.remove('left-hover');
     }
   });
   
   // 鼠标离开时恢复默认光标
   galleryContainer.addEventListener('mouseleave', () => {
     galleryContainer.classList.remove('left-hover', 'right-hover');
   });
   
   // 点击切换图片
   galleryContainer.addEventListener('click', (e) => {
     const containerWidth = galleryContainer.offsetWidth;
     const mouseX = e.clientX - galleryContainer.getBoundingClientRect().left;
     if (mouseX < containerWidth / 2) {
       // 左半区切换上一张
       currentIndex = currentIndex > 0 ? currentIndex - 1 : images.length - 1;
     } else {
       // 右半区切换下一张
       currentIndex = currentIndex < images.length - 1 ? currentIndex + 1 : 0;
     }
     showCurrentItem();
   });
   

三、移动端适配 #

通过媒体查询调整样式，添加触摸滑动监听实现导航：

1. 移动端样式调整

   @media (max-width: 768px) {
     .gallery-image {
       width: 80%;
       height: auto; /* 移动端高度自适应，维持图片比例 */
     }
     .description-text {
       width: 80vw; /* 调整文本宽度适配移动端 */
     }
   }
   

2. 触摸滑动逻辑

   let touchStartX = 0;
   let touchEndX = 0;
   const swipeThreshold = 50; // 滑动阈值，可调整敏感度
   
   galleryContainer.addEventListener('touchstart', (e) => {
     touchStartX = e.changedTouches[0].screenX;
   });
   
   galleryContainer.addEventListener('touchend', (e) => {
     touchEndX = e.changedTouches[0].screenX;
     handleSwipe();
   });
   
   function handleSwipe() {
     if (touchEndX < touchStartX - swipeThreshold) {
       // 左滑切换下一张
       currentIndex = currentIndex < images.length - 1 ? currentIndex + 1 : 0;
     } else if (touchEndX > touchStartX + swipeThreshold) {
       // 右滑切换上一张
       currentIndex = currentIndex > 0 ? currentIndex - 1 : images.length - 1;
     }
     showCurrentItem();
   }
   

四、HTML 结构示例 #

<div class="gallery-page-container">
  <div class="top-line"></div>
  <div class="image-gallery-container">
    <img src="image1.jpg" class="gallery-image" alt="Image 1">
    <img src="image2.jpg" class="gallery-image" alt="Image 2" style="display:none;">
    <img src="image3.jpg" class="gallery-image" alt="Image 3" style="display:none;">
  </div>
  <div class="bottom-section">
    <div class="bottom-text-group">
      <div class="description-text">Image 1 description</div>
      <div class="description-text" style="display:none;">Image 2 description</div>
      <div class="description-text" style="display:none;">Image 3 description</div>
      
      <div class="sirname-text">Sirname 1</div>
      <div class="sirname-text" style="display:none;">Sirname 2</div>
      <div class="sirname-text" style="display:none;">Sirname 3</div>
      
      <div class="organization-text">Organization 1</div>
      <div class="organization-text" style="display:none;">Organization 2</div>
      <div class="organization-text" style="display:none;">Organization 3</div>
    </div>
    <div class="bottom-line"></div>
  </div>
</div>

注意事项 #

• 将代码放入 Squarespace 代码注入器的对应区域（全局 CSS、页面 JS）确保生效。
• 根据设计需求调整线条高度、文本间距、滑动阈值等参数。
• 测试不同设备的兼容性，重点验证移动端触摸滑动的流畅性。

内容的提问来源于stack exchange，提问作者nathan_rose_solutions