Javascript 如何使用单个按钮循环浏览图像？_Javascript_Image_Cycle

Javascript 如何使用单个按钮循环浏览图像？

javascript image

Javascript 如何使用单个按钮循环浏览图像？,javascript,image,cycle,Javascript,Image,Cycle,我刚刚开始在GCSE级别用notepad++编写javascript。在我的评估中，我的任务之一是让交通灯改变颜色，每次点击按钮都有一个图像。我已经把红灯改成红黄灯了。然而，我无法进一步说明这一点。到目前为止，我的代码是： <!DOCTYPE html> <html> <head> <script type="text/javascript"> function lewis() { document.getElementById("p

我刚刚开始在GCSE级别用notepad++编写javascript。在我的评估中，我的任务之一是让交通灯改变颜色，每次点击按钮都有一个图像。我已经把红灯改成红黄灯了。然而，我无法进一步说明这一点。到目前为止，我的代码是：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function lewis() {
    document.getElementById("pic").src="Red-Yellow.png"
}
</script>
</head>
<body>
<button type="button" onclick="lewis()">
Change Lights</button>
<img src="Red.png" alt="Red" id="pic" style="width:250px;height:600px;">
</body>
</html>


函数lewis（）{
document.getElementById（“pic”）.src=“Red-Yellow.png”
}
换灯

这是我能力的高度，因为我刚刚开始。任何帮助都将不胜感激，非常感谢，刘易斯

（我将继续研究这个问题）

没有测试，但我想你想要这样的东西

function lewis() {
        var current_image = document.getElementById("pic").src;
        if(current_image == "Red.png"){
            document.getElementById("pic").src = "Red-Yellow.png";
        }else if(current_image == "Red-Yellow.png"){
            document.getElementById("pic").src = "Red-Green.png";
        }else if(current_image == "Red-Green.png"){
            document.getElementById("pic").src = "last-color.png";
        }else if(current_image == "last-color.png"){
            document.getElementById("pic").src = "Red.png";
        }
    }

你意识到java和javascript不是一回事，对吗？添加一个if语句来检查当前值，或者将它们添加到数组中，所以你可以转到下一个索引我想到的一些方法：-使用索引并在每次按下按钮时递增它-使用一些if语句检查图像名称并决定下一个图像-在单击时替换按钮或至少替换onclick事件。不是Neil吗？从未意识到…谢谢你，我将尝试下一课我还不确定，实际上即将尝试，将让你保持循环正确，这是恼人的，我尝试了，但很固执。我用chrome打开它，试着打开开发工具，它说没什么问题。本课还剩30分钟，在此之前我将尝试解决此问题。谢谢你的帮助。：）感谢您的帮助，我很快意识到需要将图像位置放在“.png”文件前面。现在它是完整的，功能齐全了，非常感谢：如果这个答案解决了你的问题，你可以接受它作为解决方案，也可以投票表决