.NET Core 框架的计时器上的图像更改

如何解决.NET Core 框架的计时器上的图像更改

我在网上找到了这段代码并对其进行了一些更改以供我使用，但它无法按需要工作。我也是 C# 和 .NET Core 框架的新手。

我想要发生的事情

每隔几秒钟，图像就会改变。

发生了什么

第一张图片出现在屏幕上，但是当它试图浏览列表时；屏幕上出现默认（青山蓝天）文件的图像。

我的尝试（1）

我在 <img id="imageTEST" src="~/images/basketball.jpg"> 正下方添加了 <img id="image" src="~/images/baseball.jpg"> 行。

结果：两个图像都出现在屏幕上。但是当定时器到达时；第一个图像变为默认文件，而第二个图像（篮球）保留在屏幕上。然而，图像每隔几秒钟就会抖动一次，因为当第一张图像发生变化时。这意味着代码正在遍历列表。只是没有出现在屏幕上。

cshtml：

<img id="image" src="~/images/baseball.jpg">

<script type = "text/javascript">
    var image = document.getElementById("image");
    var currentPos = 0;
    var images = ["~/images/baseball.jpg","~/images/basketball.jpg","~/images/football.jpg","~/images/soccer.jpg"]

    function changeimage() {
        if (++currentPos >= images.length)
            currentPos = 0;

        image.src = images[currentPos];
    }

    setInterval(changeimage,3000);
</script>

我的尝试（2）

我将图像列表中每个图像的图像位置更改为以下格式："../../wwwroot/images/basketball.jpg"

我这样做是因为我认为这可能与脚本输入“text/javascript”有关，我正在使用 .net 查找带有“~”的 wwwroot 位置。

结果：相同的结果

我的尝试（3）

@{
    var image = document.getElementByID("image");
    int currentPos = 0;
    var images new List<imageList>()
        {
            "~/images/baseball.jpg","~/images/soccer.jpg"
        };

    public void changeimage(){
        if(++currentPos >= image.length)
        {
            currentPos = 0;
        }
    }
    setInterval(changeimage,3000);
}

结果：不喜欢var images new List<imageList>()和public void changeimage()

我的尝试（4）

<script type = "text/javascript">
    const image=document.getElementById("image");
    let images= ["~/images/baseball.jpg","~/images/soccer.jpg"],i = 0;

    function changeimage() {
        i<images.length?i+=1:i=0; 
        image.src=images[i];
    }
    Console.Writeline("changing pic");
    setInterval(changeimage,3000);
<script>

结果：图片保持不变，Console.Writeline从未执行

解决方法

您的第一种方法是要走的路，您只需要从数组中的图像路径中删除 ~，即

var images = ["/images/baseball.jpg","/images/basketball.jpg","/images/football.jpg","/images/soccer.jpg"];

您不能在图像 src 中使用 ~ 除非它是由 Razor 编译的，这就是为什么您的初始图像元素显示而不是数组中的 srcs。

选项 2 不起作用，因为它的路径错误，应该是 /images/basketball.jpg

选项 3 不起作用，因为您混合使用 Razor C# 和 Javascript。页面加载后，在再次加载之前不会再执行 C#。

选项 4，与选项 3 相同的问题，这就是您的 Console.Writeline 不执行的原因。

删除脚本部分中的 ~ 字符后，使用 window.onload 事件调用 setInterval()：

<script type="text/javascript">

    window.onload = function () {            
        
        var currentPos = 0;
        var images = ["/images/baseball.jpg","/images/soccer.jpg"]
        var img = document.getElementById("image");

        function changeimage() {
            if (++currentPos >= images.length)
                currentPos = 0;
           
            img.src = images[currentPos];            
        }
        setInterval(changeimage,3000);
    }
</script>

<body>
    <div>
        <img id="image" src="/images/baseball.jpg">
    </div>
</body>