如何使用一个按钮循环浏览图像?
How do I cycle through images with a single button?
我刚刚开始在 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>
这是我刚起步的能力高度。
任何帮助将不胜感激,非常感谢,
刘易斯
(我会继续研究这个问题)
没有测试,但我猜你想要这样的东西。
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";
}
}
我刚刚开始在 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>
这是我刚起步的能力高度。 任何帮助将不胜感激,非常感谢, 刘易斯
(我会继续研究这个问题)
没有测试,但我猜你想要这样的东西。
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";
}
}