如何为旅游网站添加点击缩略图触发的可退出全屏幻灯片组件？

Got it! Let's build that responsive thumbnail grid with a full-screen slideshow exactly like Bing/Google Images—perfect for a travel site showing off your destination photos. Below is a complete, self-contained implementation you can tweak to fit your design:

We'll create a responsive grid for thumbnails and a hidden full-screen slideshow container. Each thumbnail links to its corresponding full-size image via a data-img attribute:

<!-- Responsive Thumbnail Grid -->
<div class="thumbnail-grid">
  <div class="thumbnail" data-img="travel-photo-1-full.jpg">
    <img src="travel-photo-1-thumb.jpg" alt="Snow-capped mountain lake">
  </div>
  <div class="thumbnail" data-img="travel-photo-2-full.jpg">
    <img src="travel-photo-2-thumb.jpg" alt="Tropical beach at sunset">
  </div>
  <div class="thumbnail" data-img="travel-photo-3-full.jpg">
    <img src="travel-photo-3-thumb.jpg" alt="Historic city alleyway">
  </div>
  <div class="thumbnail" data-img="travel-photo-4-full.jpg">
    <img src="travel-photo-4-thumb.jpg" alt="Waterfall in lush forest">
  </div>
  <!-- Add as many thumbnails as you need -->
</div>

<!-- Full-Screen Slideshow -->
<div class="slideshow-container" id="slideshow">
  <button class="slideshow-close" id="slideshowClose">&times;</button>
  <button class="slideshow-arrow slideshow-arrow-left" id="prevImg">&#8249;</button>
  <img class="slideshow-img" id="slideshowImg" src="" alt="Full-size travel photo">
  <button class="slideshow-arrow slideshow-arrow-right" id="nextImg">&#8250;</button>
</div>

This handles the responsive grid, full-screen slideshow layout, and smooth transitions. The grid adapts to any screen size, and the slideshow covers the entire viewport with a dark overlay:

/* Thumbnail Grid */
.thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.thumbnail {
  cursor: pointer;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}

.thumbnail:hover {
  transform: scale(1.03);
}

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

/* Full-Screen Slideshow */
.slideshow-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.92);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.slideshow-container.active {
  display: flex;
}

.slideshow-img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

.slideshow-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.1);
  border: none;
  color: white;
  font-size: 2.5rem;
  cursor: pointer;
  padding: 0.5rem 1.2rem;
  border-radius: 50%;
  transition: background 0.2s ease;
  z-index: 1001;
}

.slideshow-arrow:hover {
  background: rgba(255,255,255,0.2);
}

.slideshow-arrow-left {
  left: 1.5rem;
}

.slideshow-arrow-right {
  right: 1.5rem;
}

.slideshow-close {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  background: none;
  border: none;
  color: white;
  font-size: 3rem;
  cursor: pointer;
  transition: color 0.2s ease;
  z-index: 1001;
}

.slideshow-close:hover {
  color: #ccc;
}

/* Disable page scroll when slideshow is active */
body.slideshow-active {
  overflow: hidden;
}

This handles all the interactivity: opening the slideshow from a thumbnail, navigating between images, closing the slideshow, and returning to the user's original scroll position. We'll also add keyboard support for a smoother experience:

// Grab all elements we need
const thumbnails = document.querySelectorAll('.thumbnail');
const slideshow = document.getElementById('slideshow');
const slideshowImg = document.getElementById('slideshowImg');
const prevBtn = document.getElementById('prevImg');
const nextBtn = document.getElementById('nextImg');
const closeBtn = document.getElementById('slideshowClose');

// Store full-image URLs and track current slide index
const imageUrls = Array.from(thumbnails).map(thumb => thumb.dataset.img);
let currentIndex = 0;
let userScrollPosition = 0;

// Open slideshow with the clicked image
function openSlideshow(index) {
  userScrollPosition = window.scrollY; // Save where the user was scrolling
  currentIndex = index;
  slideshowImg.src = imageUrls[index];
  slideshow.classList.add('active');
  document.body.classList.add('slideshow-active');
}

// Close slideshow and return to original scroll position
function closeSlideshow() {
  slideshow.classList.remove('active');
  document.body.classList.remove('slideshow-active');
  window.scrollTo(0, userScrollPosition);
}

// Navigate to previous image (loop back to end if at start)
function showPreviousImage() {
  currentIndex = (currentIndex - 1 + imageUrls.length) % imageUrls.length;
  slideshowImg.src = imageUrls[currentIndex];
}

// Navigate to next image (loop back to start if at end)
function showNextImage() {
  currentIndex = (currentIndex + 1) % imageUrls.length;
  slideshowImg.src = imageUrls[currentIndex];
}

// Add click listeners to thumbnails
thumbnails.forEach((thumb, index) => {
  thumb.addEventListener('click', () => openSlideshow(index));
});

// Attach listeners to slideshow controls
closeBtn.addEventListener('click', closeSlideshow);
prevBtn.addEventListener('click', showPreviousImage);
nextBtn.addEventListener('click', showNextImage);

// Keyboard navigation support
document.addEventListener('keydown', (e) => {
  if (!slideshow.classList.contains('active')) return;
  
  if (e.key === 'Escape') closeSlideshow();
  if (e.key === 'ArrowLeft') showPreviousImage();
  if (e.key === 'ArrowRight') showNextImage();
});

// Close slideshow when clicking the dark background
slideshow.addEventListener('click', (e) => {
  if (e.target === slideshow) closeSlideshow();
});

Key Features Breakdown #

• Responsive Grid: The grid automatically adjusts column count based on screen size using auto-fill and minmax—works on mobile, tablet, and desktop.
• Polished Transitions: Hover effects on thumbnails and smooth opacity changes for slideshow images make interactions feel natural.
• Scroll Position Memory: Users land exactly where they left off when closing the slideshow, which is crucial for a good user experience.
• Keyboard Support: Navigate with arrow keys or close with Escape, just like Bing/Google Images.
• Accessible Controls: All buttons are clickable, keyboard-navigable, and have hover states for clarity.

You can tweak the colors, border-radius, thumbnail sizes, and image sources to match your travel site's branding. Just swap out the placeholder image paths with your actual photos!

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