<!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的工作原理，那就必须使用。