8.2 动态交互式产品展示页面

项目目标

构建一个动态交互式产品展示页面，包含产品图片、描述以及用户可交互的元素（如切换产品图片、查看产品详情等），并支持响应式设计。

1. 需求分析

页面模块：
1. 产品图片轮播（支持左右切换）
2. 产品描述及规格参数
3. 购买按钮或链接
4. 用户评论区
交互功能：
- 用户可以通过按钮切换产品图片。
- 鼠标悬停时放大图片以展示细节。
- 点击查看详细规格弹出对话框。
响应式设计：
- 移动端：单列布局，图片和描述垂直排列。
- 桌面端：双列布局，图片和描述并排显示。

2. 代码实现

2.1 HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>产品展示页面</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="header">
    <h1>产品展示</h1>
  </header>
  <main class="main">
    <section class="product-gallery">
      <div class="carousel">
        <button class="prev">←</button>
        <img src="product1.jpg" alt="产品图片 1" class="product-image">
        <button class="next">→</button>
      </div>
      <div class="thumbnails">
        <img src="product1.jpg" alt="产品缩略图 1" class="thumbnail">
        <img src="product2.jpg" alt="产品缩略图 2" class="thumbnail">
        <img src="product3.jpg" alt="产品缩略图 3" class="thumbnail">
      </div>
    </section>
    <section class="product-details">
      <h2>产品名称</h2>
      <p class="description">这是一个高品质的产品，适用于各种场景，值得信赖。</p>
      <button class="view-details">查看规格</button>
      <div class="spec-modal hidden">
        <h3>产品规格</h3>
        <p>重量: 500g</p>
        <p>尺寸: 10cm x 20cm x 5cm</p>
        <button class="close-modal">关闭</button>
      </div>
      <button class="buy-now">立即购买</button>
    </section>
  </main>
  <footer class="footer">
    <p>© 2025 产品展示页面</p>
  </footer>
  <script src="script.js"></script>
</body>
</html>

2.2 CSS 样式

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background: #f4f4f4;
  color: #333;
  padding: 20px;
}

/* Header */
.header {
  text-align: center;
  margin-bottom: 20px;
}

/* Main Layout */
.main {
  display: grid;
  gap: 20px;
}

.product-gallery {
  text-align: center;
}

.carousel {
  position: relative;
}

.product-image {
  max-width: 100%;
  border-radius: 5px;
  transition: transform 0.3s ease;
}

.product-image:hover {
  transform: scale(1.1);
}

button {
  cursor: pointer;
  background: #007bff;
  color: #fff;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  transition: background 0.3s ease;
}

button:hover {
  background: #0056b3;
}

.hidden {
  display: none;
}

.spec-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.spec-modal .close-modal {
  margin-top: 20px;
}

/* Responsive Design */
@media (min-width: 768px) {
  .main {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

2.3 JavaScript 动态交互

document.addEventListener("DOMContentLoaded", () => {
  const productImage = document.querySelector(".product-image");
  const thumbnails = document.querySelectorAll(".thumbnail");
  const modal = document.querySelector(".spec-modal");
  const viewDetailsButton = document.querySelector(".view-details");
  const closeModalButton = document.querySelector(".close-modal");

  // Thumbnail click event
  thumbnails.forEach((thumbnail) => {
    thumbnail.addEventListener("click", () => {
      productImage.src = thumbnail.src;
    });
  });

  // View details button event
  viewDetailsButton.addEventListener("click", () => {
    modal.classList.remove("hidden");
  });

  // Close modal button event
  closeModalButton.addEventListener("click", () => {
    modal.classList.add("hidden");
  });
});

3. 总结

核心技术：
- CSS 动态效果（悬停放大、按钮样式等）。
- JavaScript DOM 操作实现图片切换和模态框交互。
扩展功能：
- 增加轮播自动播放功能。
- 为用户评论区实现动态加载功能。

通过这些功能，您可以创建一个互动性强的产品展示页面，同时支持后续功能扩展。

#前端开发分享于 2025-03-11

上一篇：8.1 响应式个人简介页面下一篇：8.3 带动画效果的登录注册表单