Html 像红绿灯一样放在桌子上的图片

我有三张照片，一张狗、一只熊和一只猫的照片。我的目标是把它们变成一个红绿灯序列，从熊到猫，再到狗。使用一个按钮和一个数组，按钮是我感到困惑的部分，因为我希望所有的图片都在一条垂直线上，顶部有一个“改变动物”按钮。我对Html很陌生，所以我对它不是很在行

<table border="0" style="width:100%">
  <tr>
    <td>
      <img src="http://i0.wp.com/cdn.bgr.com/2015/10/bear.jpg?w=625">
    </td>    
  </tr>
  <tr>
    <td>
      <img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg">
    </td>    
  </tr>
  <tr>
    <td>
      <img src="http://r.ddmcdn.com/w_830/s_f/o_1/cx_0/cy_220/cw_1255/ch_1255/APL/uploads/2014/11/dog-breed-selector-australian-shepherd.jpg">
    </td>
  </tr>
</table>

---

这是一个有动物的红绿灯

var btn=document.querySelector（“按钮”）；
var td=document.querySelectorAll（“td”）；
var arr=['#F00'、'#FF0'、'#0F0']；
var项=0；
td[item+1].style.backgroundColor=arr[item]；
btn.addEventListener（“点击”，函数（e）{
td[item+1].style.backgroundColor='transparent'；
项目=（项目>1）？0：项目+1；
td[item+1].style.backgroundColor=arr[item]；
});
表格{
宽度：150px；
}
表img{
宽度：100%；
高度：自动；
}
表td{
边框：1px实心#000；
文本对齐：居中；
填充：10px；
}

换动物
能否提供您已有的代码？Google for JavaScript simple gallery实现。您的代码将非常接近。我意识到我正在尝试执行HTMLF。由于某些原因，当我在其他地方运行代码时，代码的顶部部分对我不起作用，您知道这可能是为什么吗be@Isabellaj这里有一个fiddle链接，请尝试该代码，看看它是否有效：