如何使用 setTimeout function 更改 URL 以創建更改圖片。 （帶角度）

Question

我想制作一種商業彈出窗口，每 3 秒循環播放一些圖片。

我制作了一個 div 並使用“img”標簽將 div 鏈接到 assets 文件夾。 問題是我如何讓圖片的名稱隨機改變？ 所以我在 ts 文件中創建了一個 function，它生成一個介於 1 和 9 之間的隨機數，並在 function 中使用它，並帶有一個返回圖片名稱的開關，就像我將它保存在 assets 文件夾中一樣。

當我嘗試在我的 html 組件中調用 function 時，它顯示： localhost/:1 GET http://localhost//capital/404/image (Not)

這是 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 ，這將導致 memory 泄漏並且會有奇怪的行為。

在.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>

始終嘗試將輸入綁定到變量而不是 function，因為除非您指定其他策略，否則將在每個更改檢測周期調用 function。

對於 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");}
        }