问题描述
我在网上找到了这段代码并对其进行了一些更改以供我使用,但它无法按需要工作。我也是 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>