Question

当我尝试加载此页面时，我的图片无法显示！我正在尝试制作一个红绿灯序列（英国），当按下更换灯按钮时，它会显示所有颜色！

<!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>

Answer 1

您的代码有效。但是，您的图像源路径必定存在问题。因为当我将图像更改为像lorempixel这样的遥控器时，这种方法可以正常工作。

工作jsfiddle here。

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

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

我的图片不会显示

1 个答案: