angular项目中 图片的切换

 html

      <div>
        <div class="picture-list">
          <mat-icon class="imgList-left" (click)="prevImage()">keyboard_arrow_left </mat-icon>
          <div class="picture">
            <img [src]="this.imagesList[this.currentIndex]?.url" />
          </div>
          <mat-icon class="imgList-right" (click)="nextImage()">keyboard_arrow_right</mat-icon>
        </div>
        <div class="picture-num">
          <span>{{ currentIndex + 1 }}</span>
          <span>/{{ imagesList.length }}</span>
        </div>
      </div>
    </div>

ts文件

生命类型
interface Image {
  name: string;
  url: string;
  id: number;
}

定义变量：

  imagesList: Image[] = [
    {
      id: 1,
      name: 'Nature',
      url: '/assets/Cesium/home/photo1.jpg'
    },
    {
      id: 2,
      name: 'Waterfall',
      url: '/assets/Cesium/home/photo2.jpg'
    },
    {
      id: 3,
      name: 'Sunset',
      url: '/assets/Cesium/home/photo3.png'
    }
  ];

  currentIndex = 0;

  // 点击向左箭头，切换到上一张图片
  prevImage() {
    if (this.currentIndex > 0) {
      this.currentIndex--;
    }
  }

  // 点击向右箭头，切换到下一张图片
  nextImage() {
    if (this.currentIndex < this.imagesList.length - 1) {
      this.currentIndex++;
    }
  }

 css

.picture-list{
  position: absolute;
  bottom: 81px;
  left: 420px;
  display: flex;
  .picture{
    width: 85px;
    height: 110px;
    background: #4a4a4a;
    img{
      width: 85px;
      height: 110px;
    }
  }
  .imgList-left ,.imgList-right{
    margin: auto;
    color: var(--color-border,#16D0FF);
  }
}

.picture-num{
  position: absolute;
  bottom: 55px;
  left: 475px;
  display: flex;
  span:nth-child(1) {
    color: var(--color-border,#16D0FF);
  }
}