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

【问题标题】：How do I cycle through images with a single button?如何使用单个按钮循环浏览图像？
【发布时间】：2016-02-03 10:17:47
【问题描述】：

我刚刚开始在 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>

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

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

【问题讨论】：

你知道java和javascript不是一回事吧？
添加一个if语句来检查当前值，或者将它们添加到一个数组中，这样就可以去nextIndex了
我想到的一些方法： - 使用索引并在每次按下按钮时递增 - 使用一些 if 语句检查图像名称并决定下一张图像 - 替换按钮或在至少点击时的 onclick 事件。
不是尼尔吗？从来没有意识到...

标签： javascript image cycle

【解决方案1】：

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

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";
        }
    }

【讨论】：

谢谢，下节课我试试
我还不确定，真的要尝试一下，是否会让您了解情况
对，这很烦人，我尝试过，但很固执。我用chrome打开它并尝试打开开发工具，它说没有错。本节课还剩 30 分钟，我会在此之前尝试解决问题。感谢您的帮助。 :)
感谢您的帮助，我很快意识到需要将图像位置放在“.png”文件的前面。它现在已完成且功能齐全，非常感谢：D
如果这个答案解决了你的问题，你可以接受它作为解决方案或者可以投票