深圳手机网站制作价钱适合发表个人文章的平台

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

<!-- carousel.component.html -->
<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>

/* 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;
}

//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;}
}