我在网上找到了这段代码，并对其进行了一些更改以供使用，但它无法按需工作。我也是C#和的新手。NET核心框架。
我想要发生的事情
每隔几秒钟，图像就会发生变化。
发生了什么
第一个图像出现在屏幕上，但当它试图浏览列表时；默认(青山蓝天(文件的图像显示在屏幕上。
我尝试了什么(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从不执行
您的第一种方法是，您只需要从阵列中的图像路径中删除~，即
var images = ["/images/baseball.jpg", "/images/basketball.jpg", "/images/football.jpg", "/images/soccer.jpg"];
除非由Razor编译，否则不能在图像src中使用~，这就是为什么初始图像元素在数组中显示而不是src的原因。
选项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/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>