一张桌子上的图像像一个红绿灯

Question

我有三张照片是一只狗，一只熊和一只猫的照片。我的目标是将它们变成从熊，猫到狗的交通灯序列。使用按钮和阵列，按钮是我感到困惑的部分，因为我希望所有图片都处于垂直线顶部有一个“更改动物”按钮。我对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> 

Answer 1

这里是与动物交通灯。

var btn = document.querySelector("button"); 
 
var td = document.querySelectorAll("td"); 
 
var arr = ['#F00','#FF0','#0F0']; 
 
var item = 0; 
 

 
td[item + 1].style.backgroundColor = arr[item]; 
 

 
btn.addEventListener("click", function(e) { 
 
    
 
    td[item + 1].style.backgroundColor = 'transparent'; 
 
    item = (item > 1) ? 0 : item + 1 ; 
 
    td[item + 1].style.backgroundColor = arr[item]; 
 
    
 
});

table { 
 
    width: 150px; 
 
} 
 
table img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
table td { 
 
    border: 1px solid #000; 
 
    text-align: center; 
 
    padding: 10px; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <button>CHANGE ANIMAL</button> 
 
    </td> 
 
    </tr> 
 
    <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>