Javascript 我的照片赢了';不显示

Javascript 我的照片赢了';不显示,javascript,Javascript,当我尝试加载此页面时,我的图像不会显示!我正在尝试制作一个交通灯序列(英国),当按下“更改灯”按钮时,它会显示所有颜色 <!DOCTYPE html> <html> <body> <h1><u><b>Changing Traffic Lights</b></u><h1> <button type="button" onClick="changeLights()"> Cha

当我尝试加载此页面时,我的图像不会显示!我正在尝试制作一个交通灯序列(英国),当按下“更改灯”按钮时,它会显示所有颜色

<!DOCTYPE html>

<html>
<body>

<h1><u><b>Changing Traffic Lights</b></u><h1>

<button type="button" onClick="changeLights()"> Change Lights </button>    <!-- Creates a button to change the lights with -->

<img id ="trafficlight" src="red.jpg"></img>   <!-- Creates the first visible image on the page and gives it an ID so it can be called up later -->

<script>

var trafficlights = ["red-amber.jpg","green.jpg","amber.jpg","red.jpg"]  //creates an array for the lights

var currentlight = 0 //Creates a counter variable

function changeLights () {         //Calls up a function and designs it
    document.getElementById("trafficlight").src=trafficlights[currentlight]  //Calls up the image and enables it to be changed
    currentlight=currentlight+1   //Adds one to the counter
    if (currentlight>3){
        currentlight=0
    }
}

</script>

</body>
</html>

改变交通灯
换灯
var trafficlights=[“red amber.jpg”、“green.jpg”、“amber.jpg”、“red.jpg”]//为灯光创建一个数组
var currentlight=0//创建一个计数器变量
函数changeLights(){//调用函数并设计它
document.getElementById(“trafficlight”).src=trafficlights[currentlight]//调用图像并使其能够更改
currentlight=currentlight+1//向计数器添加一个
如果(当前灯>3){
currentlight=0
}
}

您的代码工作正常。但是您的图像源路径肯定有问题。因为当我将图像更改为像lorempixel这样的远程对象时,这会正常工作

在中间工作

尝试修复JS中的图像路径。祝你好运

var trafficlights = ["http://lorempixel.com/100/100","http://lorempixel.com/100/90","http://lorempixel.com/100/100","http://lorempixel.com/100/110"]

有图像显示吗?您的源代码路径正确吗?这些图像真的可用吗?如果只显示图像而不尝试循环浏览,会发生什么情况?另外,请查看您的
if
语句,因为它会导致您的按钮从第二次单击开始切换。我很确定,如果您打开开发工具,您将看到无法获取图像,并出现404错误,显示错误路径。