第一次运行时，图像为绿色。
然后将图像设置为绿色图像gyr[0]，然后递增索引。
您可以在设置图像之前递增索引，也可以重新排序数组以使绿色位于最后。

第一次单击按钮时，index等于0，因此nextLightClick()将image.src设置为“green. jpg”，这与起始图像相同（假设“1green. jpg”是一个打字错误）。
解决方法是将index++移到nextLightClick()的第一行。

第一次进入函数并设置图像时，索引仍为0。
移动索引++;返回到函数的开头，或者将索引初始化为值1。

var index = 1;

如果您想将索引初始化为1，那么您应该将变量重命名为nextIndex之类的名称。

我不认为是这样的。你的代码工作正常。你的第一张图片是绿色的，当你第一次点击的时候，你用第一张图片替换了它，这就是为什么你看不到任何区别的原因。
您可以考虑这样做：

var gyr = new Array("http://i.imgur.com/eucAMTA.jpg", "http://is2.mzstatic.com/image/thumb/Purple122/v4/be/9a/f0/be9af074-90f2-5894-99a0-17460783db6c/source/1200x630bf.jpg", "https://i0.wp.com/fusion.net/wp-content/uploads/2016/05/RED.jpg?resize=1600%2C900&quality=80&strip=all");


var index = 0;
var gyrLen = gyr.length;

function nextLightClick() {
   index++;
  // alert("hello" + index);
  if (index == gyrLen)
    index = 0;

  var image = document.getElementById('starting_light');
  image.src = gyr[index];

 
}

img {
  width: 200px;
  height: 200px;
}

p>Click the button to change to the next light.</p>

<img id="starting_light" src="http://i.imgur.com/eucAMTA.jpg">

<button type="button" onclick="nextLightClick()">Change</button>

啊，我似乎已经找到了答案，多亏了扎克和美国人，问题是索引应该在“nextlightclick”的第一行
修复以下脚本：

<p>Click the button to change to the next light.</p>

<img id="starting_light" src="green.jpg">

<button type="button" onclick="nextLightClick()">Change lights</button>

<script>

var gyr = new Array("green.jpg","yellow.jpg","red.jpg");


var index = 0;
var gyrLen = gyr.length;

function nextLightClick() {
    index++;
    if (index == gyrLen) 
        index = 0;

    var image = document.getElementById('starting_light');
    image.src = gyr[index];
}

</script>

</body>
</html>

index更新逻辑有一个小问题。你必须评估它的值，如果它小于gry.length，再加上一个，重新初始化为0。
内部脚本代码：

var gyr = new Array("green.jpg","yellow.jpg","red.jpg");
var index = 0;

function nextLightClick() {
    index = index + 1 < gyr.length ? index + 1 : 0;
    document.getElementById('starting_light').alt = gyr[index];
}