以下是一个使用Angular实现图像间的淡入淡出效果的示例代码:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-image-fade',
templateUrl: './image-fade.component.html',
styleUrls: ['./image-fade.component.css']
})
export class ImageFadeComponent implements OnInit {
images = [
{ url: 'image1.jpg' },
{ url: 'image2.jpg' },
{ url: 'image3.jpg' }
];
currentIndex = 0;
timer: any;
ngOnInit() {
this.startImageFade();
}
startImageFade() {
this.timer = setInterval(() => {
this.currentIndex = (this.currentIndex + 1) % this.images.length;
}, 3000);
}
}
.image-container img {
opacity: 0;
transition: opacity 1s ease;
}
.image-container img.active {
opacity: 1;
}
请确保将图片文件放置在正确的路径下,并在需要使用图像淡入淡出效果的页面中添加
标签。
此示例将在每3秒钟自动切换图像,并通过淡入淡出效果进行过渡。
上一篇:Angular - 拖放上传附件