如何使用 setTimeout 函数制作更改 URL 以创建不断变化的图片.(带棱角)

Question

我想制作一种商业弹出窗口，每 3 秒循环播放一些图片。

我制作了一个div 并使用"img"标签将div 链接到资产文件夹。 问题是我将如何使图片的名称随机更改？ 所以我在 TS 文件中制作了一个生成 1 到 9 之间的随机数的函数，并在一个带有开关的函数中使用它，该开关返回图片的名称，就像我将其保存在 Assets 文件夹中一样。

当我尝试在我的 HTML 组件中调用该函数时，它说： localhost/：1 GET http://localhost:4200/assets/images//capitals/404 (未找到(

这是 HTML 文件中的代码：

<div class="changingPic1">
<img src="../../../assets/images//capitals/{{getRandomCapital()}}"  class="changingImgEffect">
</div>

这是 TS 文件中的代码：

public generateRandomNumber(min: number, max: number): number {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
public getRandomCapital(): any {
setTimeout(() => {
switch (this.generateRandomNumber(1, 9)) {
case 1: const bangkok = "bangkok.jpg";
return bangkok;
case 2: const beijing = "beijing.jpg";
return beijing;
case 3: const egypt = "egypt.jpg";
return egypt;
case 4: const jakarta = "Jakarta.jpg";
return jakarta;
case 5: const jerusalem = "jerusalem.jpg";
return jerusalem;
case 6: const mexicoCity = "mexicoCity.jpg";
return mexicoCity;
case 7: const nursultan = "nursultan.jpg";
return nursultan;
case 8: const rome = "rome.jpg";
return rome;
case 9: const sidney = "sidney.jpg";
return sidney;
}
}, 3000);
}    

Answer 1

我建议您将所有图像URL放在一个数组中，并且仅使用setInterval更改索引。在您的实现中，问题在于您在每次更改检测时都调用 setTimeout，这将导致内存泄漏并具有奇怪的行为。

在 .ts 中

public currentImgIndex = null;
public images = [
"../../../assets/images/capitals/bangkok.jpg",
"../../../assets/images/capitals/beijing.jpg",
.
.
.
];
.
.
.
ngOnInit(){
this.currentImgIndex = this.generateRandomNumber(1, this.images.length);
setInterval(() => this.currentImgIndex = this.generateRandomNumber(1, this.images.length), 3000);
}

在.html

<div class="changingPic1">
<img [src]="images[currentImageIndex]"  class="changingImgEffect">
</div>

始终尝试将输入绑定到变量而不是函数，因为除非您指定其他策略，否则将在每个更改检测周期调用该函数。

对于 404 错误，请检查您键入的路径，图像和大写字母之间似乎有一个额外的/。

Answer 2

我不确定我是否完全理解您的问题，但是如果您想循环图像，可以在css中使用@keyframes

.img-container {
width: 400px;
height: 400px;
}
.img-picture {
width: 100%;
height: 100%;
background-image: url("pic1.jpg");
animation: changeBackground 10s infinite
}
@keyframes changeBackground {
0% {background-image: url("pic1.jpg");}
33% {background-image: url("pic2.jpg");}
66% {background-image: url("pic3.jpg");}
100% {background-image: url("pic1.jpg");}
}