如何编写脚本实现产品展示图与选中缩略图的切换功能？

Hey there! Let me walk you through building this product image gallery with thumbnail switching, fixing up the code snippet you shared along the way.

Step 1: Set Up the HTML Structure #

First, we need a clear, semantic structure for the main image display and thumbnail grid. Here's a clean setup:

<div class="product-gallery">
  <!-- Main product image area -->
  <div class="main-image">
    <img src="product-main-1.jpg" alt="Main Product View">
  </div>
  <!-- Thumbnail grid -->
  <div class="thumbnail-container">
    <div class="thumbnail-item active">
      <img src="product-main-1.jpg" alt="Thumbnail 1">
    </div>
    <div class="thumbnail-item">
      <img src="product-main-2.jpg" alt="Thumbnail 2">
    </div>
    <div class="thumbnail-item">
      <img src="product-main-3.jpg" alt="Thumbnail 3">
    </div>
  </div>
</div>

Step 2: Add Basic CSS for Layout & Feedback #

Style the gallery to make it look polished, and add visual feedback for the active thumbnail:

.product-gallery {
  max-width: 650px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.main-image img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.thumbnail-container {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.thumbnail-item {
  width: 90px;
  height: 90px;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.thumbnail-item.active {
  border-color: #2563eb; /* Highlight active thumbnail with a blue border */
}

.thumbnail-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Step 3: Write the JavaScript Switching Logic #

Your original code had a small syntax issue: jQuery uses click() instead of onClick(). Here's the fixed and improved version:

// Wait for the DOM to fully load before running the script
$(document).ready(function() {
  // Bind click event to each thumbnail
  $('.thumbnail-item').click(function() {
    // Remove active state from all thumbnails
    $('.thumbnail-item').removeClass('active');
    // Add active state to the clicked thumbnail
    $(this).addClass('active');
    // Get the image URL from the clicked thumbnail
    const targetImageUrl = $(this).find('img').attr('src');
    // Update the main image's source
    $('.main-image img').attr('src', targetImageUrl);
  });
});

Key Notes: #

• DOM Readiness: Using $(document).ready() ensures our script only runs after all page elements are loaded, so we don't try to interact with elements that don't exist yet.
• State Management: The active class lets users see which thumbnail is currently selected, thanks to the CSS we added.
• Image Sync: We grab the src attribute from the clicked thumbnail and assign it directly to the main image's src to trigger the switch.

No jQuery? Here's the Vanilla JS Version #

If you prefer not to use jQuery, this native JavaScript code does the exact same thing:

// Wait for DOM content to load
document.addEventListener('DOMContentLoaded', function() {
  const thumbnailItems = document.querySelectorAll('.thumbnail-item');
  const mainImage = document.querySelector('.main-image img');

  thumbnailItems.forEach(item => {
    item.addEventListener('click', function() {
      // Remove active class from all thumbnails
      thumbnailItems.forEach(thumb => thumb.classList.remove('active'));
      // Add active class to clicked thumbnail
      this.classList.add('active');
      // Update main image source
      mainImage.src = this.querySelector('img').src;
    });
  });
});

That's it! This setup will let users click any thumbnail to switch the main product image, with clear visual feedback for the selected thumbnail.

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