fotos mudam de tanto em tanto tempo

Possuo uma página que possui três imagens a serem mostradas. Em cima das fotos existem três(3) abas, numeradas de 1 a 3, onde, clicando em cima dessas abas a foto muda. Muito bem, até aí legal, o que eu tô querendo é o seguinte:

Ao clicar na aba, a aba que foi clicada fique diferente das demais, e que também, essas abas fiquem se alternando de 5 em 5 segundos. Por exemplo, a aba 1 inicia de cor branca e a foto mostrada é a foto referente a aba 1, após 5 segundos a aba 1 fica cinza e a aba 2 que estava cinza fica branca, mostrando a a foto referente a essa aba, e assim sucessivamente.

segue a parte do código que está isso:

<table style="width: 80%" cellspacing="0" cellpadding="0"> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <th width="36%" scope="col"> </th> <th width="12%" scope="col"> </th> <th width="23%" scope="col"> </th> <th width="8%" scope="col"><a href="java script:;" onClick="document.getElementById('foto_pa').src='images/edu_p_sus_chamada.jpg'"><img id="aba_1" src="images/aba_01_active.gif" alt="Portal Educar para a Sustentabildiade" width="30" height="23" /></a></th> <th width="8%" scope="col"><a href="java script:;" onClick="document.getElementById('foto_pa').src='images/uhuh.gif'"><img id="aba_2" src="images/aba_02.gif" alt="Para transformar conhecimento em ação" width="30" height="23" /></a></th> <th width="8%" scope="col"><a href="java script:;" onClick="document.getElementById('foto_pa').src='images/uhuh2.gif'"><img id="aba_3" src="images/aba_03.gif" alt="O Meio Ambiente & Você" width="30" height="23" /></a></th> <th width="5%" scope="col"> </th> </tr> </table></td> </tr> <tr> <td><div align="center"><img src="images/top4.gif" width="375" height="11" /></div></td> </tr> <tr> <td background="images/sadsdsa.gif"><img id="foto_pa" src="images/edu_p_sus_chamada.jpg" alt="" /></td> </tr> <tr> <td background="images/sadsdsa.gif"><img src="images/bottom4.gif" width="375" height="11" /></td> </tr> </table>