javascript在单击按钮时在三个图像之间切换
[英]javascript changing between three images on a button click
问题描述
<!DOCTYPE html>
<html>
<head>
<script>
var trafficlights = ['redlight.png','yellowlight.png','greenlight.png'];
var num = 1
function lightsequence() {
document.getElementById('light').src = trafficlights[num];
num = num + 1;
}
</script>
</head>
<body>
<img id="light" src="redlight.png">
<button onclick="lightsequence()">Change Lights</button>
</body>
</html>
我写了那段代码，每次单击按钮时图像都会按顺序更改，但是如果我一直单击，我想不出如何颠倒顺序，即交通灯红色黄色绿色黄色红色等等。单击。 我不熟悉 jQuery，所以不想理想地使用它们，但如果有人可以在工作中用 jQuery 完全解释它，它将不得不这样做。
2 个解决方案
解决方案1
2 已采纳 2016-10-07 14:00:04
在这种情况下， 模运算符非常方便：
document.getElementById('light').src = trafficlights[num++ % trafficlights.length];
这是一个演示：
var trafficlights = [ 'https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Red.png', 'https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Yellow.png', 'https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Green.png' ]; var num = 1 function lightsequence() { document.getElementById('light').src = trafficlights[num++ % trafficlights.length]; }
<img id="light" src="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Red.png"> <button onclick="lightsequence()">Change Lights</button>
解决方案2
0 2019-10-30 08:40:11
换灯
function lightsequence(){ document.getElementById("light").src if(document.getElementById("light").src=="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Red.png"){ document.getElementById("light").src="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Yellow.png" }else if(document.getElementById("light").src=="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Yellow.png"){ document.getElementById("light").src="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Green.png" }else{ document.getElementById("light").src="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Red.png" } }
<img id="light" src="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Red.png"> <button onclick="lightsequence()">Change Lights</button>
使用按钮在2张图像之间切换
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.