请求提供具备缩略图与主图互换功能的Angular轮播示例

实现以下核心功能：

• 显示一张处于激活状态的主图
• 点击缩略图时，该缩略图替换当前主图
• 原主图同时移动至被点击缩略图的位置

组件模板 (app-image-carousel.component.html) #

<div class="carousel-container">
  <!-- 主图区域 -->
  <div class="main-image-wrapper">
    <img [src]="activeImage.url" alt="{{activeImage.alt}}" class="main-image" />
  </div>

  <!-- 缩略图区域 -->
  <div class="thumbnails-wrapper">
    <div 
      class="thumbnail-item"
      *ngFor="let image of thumbnails; let i = index"
      (click)="swapImages(i)"
    >
      <img [src]="image.url" alt="{{image.alt}}" class="thumbnail-image" />
    </div>
  </div>
</div>

组件逻辑 (app-image-carousel.component.ts) #

import { Component } from '@angular/core';

interface ImageItem {
  url: string;
  alt: string;
}

@Component({
  selector: 'app-image-carousel',
  templateUrl: './app-image-carousel.component.html',
  styleUrls: ['./app-image-carousel.component.css']
})
export class AppImageCarouselComponent {
  activeImage: ImageItem = {
    url: 'https://picsum.photos/id/237/800/400',
    alt: '主图示例'
  };

  thumbnails: ImageItem[] = [
    { url: 'https://picsum.photos/id/1/200/100', alt: '缩略图1' },
    { url: 'https://picsum.photos/id/2/200/100', alt: '缩略图2' },
    { url: 'https://picsum.photos/id/3/200/100', alt: '缩略图3' }
  ];

  swapImages(thumbnailIndex: number): void {
    // 临时存储当前主图
    const tempImage = this.activeImage;
    // 将点击的缩略图设为新主图
    this.activeImage = this.thumbnails[thumbnailIndex];
    // 把原主图放到被点击的缩略图位置
    this.thumbnails[thumbnailIndex] = tempImage;
  }
}

组件样式 (app-image-carousel.component.css) #

.carousel-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.main-image-wrapper {
  margin-bottom: 1.5rem;
  border: 2px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.main-image {
  width: 100%;
  height: auto;
  display: block;
}

.thumbnails-wrapper {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.thumbnail-item {
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.thumbnail-item:hover {
  border-color: #007bff;
}

.thumbnail-image {
  width: 200px;
  height: 100px;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

使用方式 #

在父组件模板中直接引入该组件即可：

<app-image-carousel></app-image-carousel>

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