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

Question

我在网上找到了这段代码，为了我的使用做了一些修改，但它没有按需要工作。我也是 C# 和 .NET Core 框架的新手。

我想要发生的事情

每隔几秒，图像就会发生变化。

发生了什么事

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

我试过的(1)

我在 <img id="image" src="~/images/baseball.jpg"> 下添加了行 <img id="imageTEST" src="~/images/basketball.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/basketball.jpg", 
            "~/images/football.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/basketball.jpg", 
            "~/images/football.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不执行

Answer 1

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

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 没有执行。

Answer 2

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

<script type="text/javascript">

    window.onload = function () {            
        
        var currentPos = 0;
        var images = ["/images/baseball.jpg", "/images/basketball.jpg", "/images/football.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>

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

Image changing on timer for .NET Core framework

javascript

asp.net-mvc

image

asp.net-core

c#-2.0