实现原理：将所有图片都堆叠在一起，并将位置设置为absolute绝对定位，opacity透明度设置为0，初始状态第一张图片的透明度设置为1；设置一个计数变量click_account用来记录当前显示的图片编号；点击上下页编号时候改变计数变量；图片的切换通过动画tranform实现。

<div class='container'>
  <img [ngClass]="{'showSlide':click_account==0,'hideSlide': click_account!=0}"/>
  <img [ngClass]="{'showSlide':click_account==1,'hideSlide': click_account!=1}"/>
  <img [ngClass]="{'showSlide':click_account==2,'hideSlide': click_account!=2}"/>
  <img [ngClass]="{'showSlide':click_account==3,'hideSlide': click_account!=3}"/>

  <button class='preBtn' (click)="preSlide()">button>
  <button class='nextBtn' (click)="nextSlide()">button>
div>
1
2
3
4
5
6
7
8
9
10

/* carousel.component.css */
.container {
  position: relative;
  width: 100%;
}
.container: before {
  content: "";
  display: block;
  padding-top: 100%;
  width: 100%;
  height: 0.1px;
}
.container img {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform: opacity 0.3s ease 0; 
}
.container img: nth-child(1) {
  opacity: 1;
}

.preBtn,.nextBtn {
  //...
}

.showSlide {
  opacity: 1;
}

.hideSlide {
  opacity: 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

//carousel.component.ts
import { Component } from '@angular/core';

@Component ({
  selector: 'carousel',
  templateUrl: './carousel.component.html',
  styleUrls: './carousel.component.css'
})

export class CarouselComponent {
  click_account = 0;

  nextSlide(){
    this.click_account = (this.click_account + 1) % 4;
  }

  preSlide(){
    this.click_account = (this.click_account - 1) % 4;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20